uni-app domModule.addRule，一加手机显示乱码

uni-app domModule.addRule，一加手机显示乱码

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

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
Alpha

HBuilderX版本号：
3.1.4

手机系统：
Android

手机系统版本号：
Android 11

手机厂商：
一加

手机机型：
8T

页面类型：
nvue

打包方式：
云端

示例代码：

const domModule = weex.requireModule('dom');  

domModule.addRule('fontFace', {  

'fontFamily': "iconfont",  

'src': "url('https://at.alicdn.com/t/font_2003008_qcvzbur90fj.ttf')"  

});  

或者本地也是  

src: "url('/static/iconfont.ttf')"

操作步骤：

const domModule = weex.requireModule('dom');  

domModule.addRule('fontFace', {  

'fontFamily': "iconfont",  

'src': "url('https://at.alicdn.com/t/font_2003008_qcvzbur90fj.ttf')"  

});  

或者本地也是  

src: "url('/static/iconfont.ttf')"

预期结果：
正常显示iconfont

实际结果：
在一加8T，Android 11会乱码，其他手机不会

bug描述：
domModule.addRule，在一加手机会乱码，其他手机不会


更多关于uni-app domModule.addRule，一加手机显示乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app domModule.addRule，一加手机显示乱码的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的字体加载兼容性问题，在一加手机Android 11系统上确实存在。主要原因是字体文件加载和解析的兼容性差异。

建议解决方案：

  1. 使用base64嵌入字体 将字体文件转换为base64格式，直接嵌入CSS中：
@font-face {
  font-family: 'iconfont';
  src: url('data:font/ttf;base64,AAEAAAALAIAAAw...') format('truetype');
}
  1. 预加载字体资源 在页面初始化时提前加载字体：
const fontFace = new FontFace('iconfont', 'url(/static/iconfont.ttf)');
fontFace.load().then(() => {
  document.fonts.add(fontFace);
});

  1. 使用unicode-range优化 如果只使用部分图标，可以提取需要的字符子集，减少字体文件大小。

  2. 降级方案 检测到一加设备时，使用图片图标替代字体图标：

const isOnePlus = /OnePlus/.test(navigator.userAgent);
回到顶部