uni-app nvue代码中自定义了字体，在Android平台生效，但在iOS平台不生效

uni-app nvue代码中自定义了字体，在Android平台生效，但在iOS平台不生效

开发环境 版本号 项目创建方式
Mac 13.1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.15

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iPad mini4

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

beforeCreate(){
const domModule = weex.requireModule('dom')
console.log(plus.io.convertLocalFileSystemURL("/static/bingyuyasong.TTF"))
domModule.addRule('fontFace', {
'fontFamily': "bingyuyasong",
'src': 'url("'+"file:/" + plus.io.convertLocalFileSystemURL("/static/bingyuyasong.TTF")+'")'
});
}

对应的log输出看， 文件的路径应该没问题的：

09:44:50.661 /var/mobile/Containers/Data/Application/A012EF2E-C939-45D2-8F98-0EEDCBE32E70/Documents/Pandora/apps/HBuilder/www/static/bingyuyasong.TTF at pages/index/index.nvue:868


操作步骤：

在iOS真机调试中，添加的自定义字体无法生效。

预期结果：

在iOS真机调试中，添加的自定义字体应该能和安卓机器一样生效。


实际结果：

在iOS真机调试中，字体还是变为系统默认字体。

bug描述：

NVUE代码，按文档在beforeCreate里添加了自定义字体，在安卓模拟器和真机上运行正常，字体生效，但是在iOS的真机调试，怎么都无法生效。


更多关于uni-app nvue代码中自定义了字体，在Android平台生效，但在iOS平台不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已经解决了。 不需要’url("’+“file:/” + plus.io.convertLocalFileSystemURL("/static/bingyuyasong.TTF")+’")’， 直接"url(’…/…/static/bingyuyasong.TTF’)"就可以了

更多关于uni-app nvue代码中自定义了字体，在Android平台生效，但在iOS平台不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 nvue 开发时，自定义字体在 Android 平台上生效但在 iOS 平台上不生效，可能是由于以下几个原因造成的。你可以按照以下步骤进行排查和解决：

1. 字体文件的正确引用

确保字体文件已经正确放置在项目的 static 目录下，并且在 nvue 文件中正确引用了字体文件。

例如，如果你有一个字体文件 myfont.ttf，它应该放在 static/fonts/myfont.ttf 路径下。

2. 字体文件的格式

iOS 对字体文件的格式要求比较严格，通常支持 .ttf 和 .otf 格式。确保你的字体文件是 iOS 支持的格式。

3. 在 nvue 中定义字体

在 nvue 文件中，你需要使用 @font-face 来定义字体。例如：

@font-face {
    font-family: 'MyFont';
    src: url('/static/fonts/myfont.ttf');
}

4. 在样式中应用字体

在需要使用自定义字体的元素中，使用 font-family 属性来应用字体：

.text {
    font-family: 'MyFont';
}

5. iOS 平台的字体加载问题

iOS 平台在加载自定义字体时可能会有缓存问题。你可以尝试以下方法来解决：

  • 清除缓存：在 iOS 设备上清除浏览器缓存或重新安装应用。
  • 使用绝对路径：确保字体文件的路径是绝对路径，而不是相对路径。
  • 重新编译：有时重新编译项目可以解决字体加载问题。

6. 检查字体文件是否被正确打包

确保字体文件已经被正确打包到最终的应用程序中。你可以检查编译后的 dist 目录，确认字体文件是否存在。

7. 使用 uni-app 提供的字体加载方法

uni-app 提供了一些方法来处理字体加载问题。你可以在 pages.json 中配置字体：

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "app-plus": {
                    "fontFamily": "MyFont"
                }
            }
        }
    ]
}

8. 使用 uni.loadFontFace

uni-app 提供了 uni.loadFontFace API 来动态加载字体。你可以在 onLaunch 或 onLoad 生命周期中调用该方法：

uni.loadFontFace({
    family: 'MyFont',
    source: 'url("/static/fonts/myfont.ttf")',
    success: function() {
        console.log('字体加载成功');
    },
    fail: function(err) {
        console.log('字体加载失败', err);
    }
});
回到顶部