uni-app IOS端引入两次fontFace冲突问题 在IOS端，引入两次fontFace后，第二个fontFace会与第一个产生冲突，即使已分别定义了不同的fontFamily。安卓端表现正常，IOS端出现异常。

uni-app IOS端引入两次fontFace冲突问题 在IOS端，引入两次fontFace后，第二个fontFace会与第一个产生冲突，即使已分别定义了不同的fontFamily。安卓端表现正常，IOS端出现异常。

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

示例代码：

domModule.addRule('fontFace',{  
    'fontFamily':"iconfont3",  
    src:"url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTY8b6REAABqcAAAAHEdERUYAKQAfAAAafAAAAB5PUy8yPG.....)"  

domModule.addRule('fontFace',{  
    'fontFamily':"iconfont2",  
    src:"url('data:font/truetype;charset=utf-8;base64,AAafAAAAB5PUy8yPGTY8b6REAABqcAAAAEAAAEdERUYAANAIAAAwBQRkZUAAHKQAfA.....)"  
})

操作步骤：

domModule.addRule('fontFace',{  
    'fontFamily':"iconfont3",  
    src:"url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTY8b6REAABqcAAAAHEdERUYAKQAfAAAafAAAAB5PUy8yPG.....)"  

domModule.addRule('fontFace', {  
    //  'fontFamily': "iconfont2",  
    //  'src': "url('https://at.alicdn.com/t/font_2345296_5clshyainyr.ttf')"  
    // });

你们可以添加两份iconfont，在引入图标，你就会发现，第二份的iconfont 图标样式出不来，如果出的来，必然是第一份iconfont的，也就是虽然定义了不同的fontFamily，但是没用

预期结果：

和安卓一样，可以追加

实际结果：

与安卓不一样，不可以追加

bug描述：

因为有一份iconfont项目找不到了，导致我们新建了一份iconfont，来添加新图标迭代产品，但是我们发现，新增上去的第二份icon样式，在IOS端无法生效，但是在安卓端是正常可以的，很是棘手。

我们在app.vue。onLaunch页面执行

domModule.addRule('fontFace',{  
    'fontFamily':"iconfont3",  
    src:"url('data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTY8b6REAABqcAAAAHEdERUYAKQAfAAAafAAAAB5PUy8yPG.....)"  

domModule.addRule('fontFace',{  
    'fontFamily':"iconfont2",  
    src:"url('data:font/truetype;charset=utf-8;base64,AAafAAAAB5PUy8yPGTY8b6REAABqcAAAAEAAAEdERUYAANAIAAAwBQRkZUAAHKQAfA.....)"  
})

这种尴尬的局面，导致我们必须把项目中以前的图标全删了，再重新来一次，简直要搞死人，否则，没办法追加了啊。


更多关于uni-app IOS端引入两次fontFace冲突问题 在IOS端，引入两次fontFace后，第二个fontFace会与第一个产生冲突，即使已分别定义了不同的fontFamily。安卓端表现正常，IOS端出现异常。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app IOS端引入两次fontFace冲突问题 在IOS端，引入两次fontFace后，第二个fontFace会与第一个产生冲突，即使已分别定义了不同的fontFamily。安卓端表现正常，IOS端出现异常。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS系统限制问题。iOS的WebView对通过CSS @font-face规则加载的字体文件有缓存机制，当检测到相同的字体内容（即使使用不同的fontFamily名称）时，可能会复用第一个加载的字体实例。

从技术角度看，问题根源在于两个字体文件虽然使用了不同的fontFamily名称，但iOS系统可能根据字体文件的二进制内容进行缓存和匹配。当检测到相似的字体数据时，系统会错误地复用第一个字体定义。

建议解决方案：

  1. 字体文件差异化处理：对第二个字体文件进行轻微修改，比如添加一个空白字符或调整字体元数据，使其二进制内容与第一个字体产生差异。

  2. 使用网络字体：将其中一个字体改为通过HTTP URL加载，避免两个都使用base64内嵌方式：

domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('https://your-domain.com/fonts/iconfont2.ttf')"
});
  1. 延迟加载：在两个字体加载之间添加时间间隔：
domModule.addRule('fontFace', {
    'fontFamily': "iconfont3",
    src: "url('data:font/truetype;charset=utf-8;base64,...')"
});

setTimeout(() => {
    domModule.addRule('fontFace', {
        'fontFamily': "iconfont2", 
        src: "url('data:font/truetype;charset=utf-8;base64,...')"
    });
}, 100);
回到顶部