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

【报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 负责人:无 分享
已邀请:

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容