uni-app 动态加载字体

本文讨论了 uni-app 动态加载字体的相关内容，介绍了加载字体的方法、支持平台、代码示例、注意事项以及推荐方式等。关键要点包括：

1. 加载方法：使用 uni.loadFontFace(Object object) 进行动态加载字体。
2. 支持平台：支持 App、H5、微信小程序（app-nvue 不支持本 api）。
3. 代码示例：展示了使用 uni.loadFontFace 加载字体的具体代码，设置了字体名称、资源地址、字体样式等参数。
4. 注意事项：使用网络字体时，字体链接必须是 https（微信小程序只支持 https），网络字体文件大小需小于 30M，字体格式为 ttf。
5. 推荐方式：推荐使用 @font-face 方式定义字体，给出了具体代码示例。
6. 参考资料：提供了相关资料链接 uniapp.dcloud.net.cn/api/ui/font… 。

uni.loadFontFace(Object object)

支持平台：App、H5、微信小程序（app-nvue不支持本api）

uni.loadFontFace({
  family: 'huashetianzu_mianfeiziti',
  // 字体资源的地址
  source: 'url("https://static.xcmdong.com/ds/main/fonts/huashetianzu_mianfeiziti.ttf")',  
  desc: {
      style: 'normal', // 字体样式，normal / italic / oblique
      weight: 'normal',    // 字体粗细，可选值为 normal / bold / 100 / 200../ 900
      variant: 'normal',    // 设置小型大写字母的字体显示文本，可选值为 normal / small-caps / inherit
  },  
  success() {
    console.log('shanhai_mianfeiziti success')
  }
})

注意事项：

1. 使用网络字体，字体链接必须是 https （微信小程序只支持 https）。
2. 网络字体文件大小需要小于 30M。
3. 字体格式：ttf。

@font-face（推荐）

@font-face {
  font-family: 'shanhai_mianfeiziti';
  src: url('https://static.xcmdong.com/ds/main/fonts/huashetianzu_mianfeiziti.ttf');
}

资料

uniapp.dcloud.net.cn/api/ui/font…