uni-app uni.loadFontFace接口的global属性在App环境不生效

uni-app uni.loadFontFace接口的global属性在App环境不生效

测试过的手机：

  • Redmi 13 note pro+
  • iPhone 16

操作步骤：

  • App.vue 的onLaunch 调用loadFontFace。或者某个页面调用loadFontFace

预期结果：

  • 只需要loadFontFace一次，全部页面都应用。

实际结果：

  • 只有当前页面生效。

bug描述：

  • uni.loadFontFace 这个api的global属性不能够设置全局页面生效，必须得每个页面设置一次。

| 项目信息         | 详情                     |
|------------------|--------------------------|
| 产品分类         | uniapp/App               |
| PC开发环境       | Windows                  |
| PC开发环境版本   | windows 11 pro           |
| HBuilderX类型    | 正式                     |
| HBuilderX版本    | 4.76                     |
| 手机系统         | 全部                     |
| 手机厂商         | 华为                     |
| 页面类型         | vue                      |
| vue版本          | vue3                     |
| 打包方式         | 云端                     |
| 项目创建方式     | HBuilderX                |
| nvue编译模式     | - (未提及)                |

更多关于uni-app uni.loadFontFace接口的global属性在App环境不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

uniapp 还是 uni-app x ，如果是 uniapp 可以直接在 app.vue 里注册 font-face

更多关于uni-app uni.loadFontFace接口的global属性在App环境不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniapp，打包app，非小程序

回复 wujingquan: 可以直接在 app.vue 里注册 font-face

在 uni-app 中，uni.loadFontFace 的 global 属性在 App 端确实存在兼容性问题。根据官方文档和社区反馈，该属性在 H5 和小程序平台可以正常实现全局字体加载，但在 App 端（包括 iOS 和 Android）可能无法跨页面生效。

解决方案：

  1. 手动管理字体加载：在每个需要该字体的页面单独调用 uni.loadFontFace（不设置 global 属性），确保字体在当前页面生效。
  2. 使用 CSS 替代方案：通过 [@font-face](/user/font-face) 在全局样式文件（如 App.vue 的 <style> 或 common.css）中定义字体，利用 url() 直接引入字体文件（支持网络链接或本地路径）。例如：
    [@font-face](/user/font-face) {
  font-family: 'CustomFont';
  src: url('~@/static/font.ttf');
}
回到顶部