chualosue
chualosue
  • 发布:2023-12-15 10:40
  • 更新:2023-12-15 10:40
  • 阅读:91

【报Bug】uniappx 引入字体后行距会出现问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.98

手机系统: Android

手机系统版本号: Android 13

手机厂商: 小米

手机机型: redmi k50 ultra

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view style="padding-top: 100px;">
<text style="font-family: SourceHanSansCN; font-size: 10px;">这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本</text> <text class="text-10 border-bottom">这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本</text>
<text style="font-family: SourceHanSansCN; font-size: 12px;">这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本</text>
<text style="font-family: SourceHanSansCN; font-size: 14px;line-height: 3.1;">这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本</text>
<text style="font-family: SourceHanSansCN; font-size: 16px;line-height: 3.1;">这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本这是一行长文本</text>
</view>
</template>

<script lang="uts">
export default {
computed:{
},
data() {
return {
}
},
onLoad() {
uni.loadFontFace({
global:true,
family: 'SourceHanSansCN',
source: '/static/SourceHanSansCN-Regular/SourceHanSansCN-Regular.ttf',
success() {
console.log('loadFontFace SourceHanSansCN')
},
fail(error) {
console.warn('loadFontFace SourceHanSansCN fail', error.errMsg)
},
})
},
methods: {
}
}
</script>

<style>
</style>

操作步骤:

如代码

预期结果:

引入思源黑体后文本换行不重叠

实际结果:

引入思源黑体后文本换行不重叠

bug描述:

uniappx引入字体后,字体换行会导致字体重叠(图2),必须设置行高3+才不重叠(行高过大影响间距)
uniapp版本nvue页面不会有这个问题(图1)

2023-12-15 10:40 负责人:无 分享
已邀请:

要回复问题请先登录注册