uni-app vue的不同版本字体显示效果不一样

uni-app vue的不同版本字体显示效果不一样

开发环境 版本号 项目创建方式
Windows Win11 22631.4751 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Win11 22631.4751

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iPhone11，iPhone16 pro max

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<!-- #ifdef VUE3 -->
<view>
在vue3下面字体展示效果
</view>
<input type="text" />
<!-- #endif -->
<!-- #ifdef VUE2 -->
<view>
在vue2下面字体展示效果
</view>
<!-- #endif -->  
</view>
</template>

<script>
export default {
data() {
return {}
},
onLoad() {},
methods: {}
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}

.text-area {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26px;
}

.title {
font-size: 26px;
color: #8f8f94;
}
</style>

更多关于uni-app vue的不同版本字体显示效果不一样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

测试在ios18.3跟18.3.1手机上都出现过，没有其他测试机可供测试了

更多关于uni-app vue的不同版本字体显示效果不一样的实战教程也可以访问 https://www.itying.com/category-93-b0.html


作者大大解决没，也是遇到了这个问题

自己下了字体包，解决的

关于uni-app中Vue2和Vue3版本字体显示效果不一致的问题，主要原因可能有以下几点：

  1. 默认样式差异：Vue3项目默认使用了新的编译器，可能导致基础样式与Vue2有所不同。

  2. 字体继承机制：在Vue3环境下，部分组件可能没有正确继承父级字体样式，建议明确指定字体样式：

.text-area {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px;
}

  1. 平台差异：iOS系统不同版本对字体渲染有细微差别，特别是iOS18可能会有调整。

  2. 输入框默认样式：input元素在不同Vue版本下可能应用了不同的默认样式，建议统一设置：

input {
    font: inherit;
    font-size: 26px;
}
回到顶部