微信小程序使用自定义字体的三种方法

weixin_34332905

于 2019-05-06 14:42:35 发布

阅读量2.7w

点赞数 2

CC 4.0 BY-SA版权

文章标签：移动开发游戏 json

原文链接：https://juejin.im/post/5cd0402bf265da038932a88e

本文介绍了微信小程序中加载自定义字体的三种方法：1) 使用`loadFontFace`接口，但受网络和组件支持限制；2) 通过`face-font url`的CSS规则，同样受限且不支持本地文件；3) `face-font base64`，虽方便但可能超出小程序体积限制。在实际应用中，这些方法在安卓和iOS真机上可能存在问题，尤其是在涉及canvas的场景下。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、loadFontFace接口

小程序官方提供的接口，最便捷的加载字体的方法，不过限制颇多。必须https且同源，canvas等原生组件不支持。注意！！使用本地文件无效，必须使用网络地址。

官方文档

演示代码：

wx.loadFontFace({
  family: 'FZSuXSLSJW',
  source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")',
  success: res => {
    console.log('font load success', res)
  },
  fail: err => {
    console.log('font load fail', err)
  }
})
复制代码