最近在开发动森的一款小程序,到目前为止踩了不少坑,今天记录一下小程序引入自定义字体的方式。后续会陆续更新其他踩坑记录。

首先,小程序是支持使用自定义字体的,使用 wx.loadFontFace() 就可以引入字体,但是使用这个 api 有一些限制:

需要特别注意的点有:

第一点:字体格式,保险起见使用 ttf 格式,如果不是 ttf 格式,可以在 https://transfonter.org/ 在线转一下。

第二点:字体链接必须是 https,意味着不支持引入本地字体。

第三点:链接必须同源或者开启了 cors 支持。

其他几点注意点对使用有影响,但没以上三点重要。

我将字体上传到了腾讯的对象存储上,因此我要在存储桶的设置中对 servicewechat.com 开启 cors 支持:

1、登录腾讯云,进入对象存储控制台

2、点击【存储桶列表】菜单

3、点击上传了字体的存储桶,进入存储桶详情

4、点击左侧【基础配置】菜单

5、找到【跨域访问CORS设置】卡片,点击添加规则,照下图填写表单并保存,过一会儿就会生效。

官方文档上说如果需要全局支持字体的话 wx.loadFontFace 需要在 app.js 中调用并且设置 globaltrue

并且使用 global 属性对调试基础库版本有要求,需要 2.10.0 以上,否则字体只会在调用这个 api 的页面生效。

还有注意中提到的第四点也注意一下,可能会有个报错,但是字体实际已经生效,这个报错可以忽略。

但是我使用的是 uni-app,我尝试写在 main.js 入口文件中,但是并没有生效,不过 uni-app 支持 vue 的 mixins,创建一个font.js:

1
2
3
4
5
6
7
8
9
10
// @/mixins/font.js

export default {
onLoad() {
uni.loadFontFace({
family: 'DFYuanW9',
source: 'url("https://xxxxxxx.ttf")',
})
}
}

main.js 中:

1
2
3
import mixin from '@/mixins/font.js'

Vue.mixin(mixin)

并在全局 css 中使用字体:

1
2
3
page{
font-family: 'DFYuanW9'
}

这样每个页面就都会生效了。

下面是字体使用效果:

不使用字体:

使用字体: