uni-app 动态加载字体

原创已于 2025-05-21 14:56:40 修改 · 352 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #uniapp #vue.js #javascript

于 2025-05-21 14:56:09 首次发布

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

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

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')
  }
})

注意事项：

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

@font-face（推荐）

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

资料

https://uniapp.dcloud.net.cn/api/ui/font.html