微信小程序使用苹方字体

最近的一个改版需求设计师在设计稿中使用了苹方字体,在网上找了一下解决方案,无外乎两种方式:

第一种方式,base64 encode

如果字体比较小,如各种英文字体,可以把字体上传到 https://transfonter.org/ 转换成base64格式,然后直接在样式中使用。具体使用可参考 【微信小程序】如何引入外部字体样式一文。

第二种方式,官方API

如果字体比较大,如各种中文字体动辄超过10mb,用base64显然是不合适的,小程序超过2m还要分包处理,为了一个字体实在不值当,那么可以用官方的API wx.loadFontFace加载外部字体,像这样:

1
2
3
4
5
wx.loadFontFace({
family: 'PingFangSC-Medium',
source: 'url("https://www.your-server.com/PingFangSC-Medium.ttf")',
success: function(){console.log('load font success')}
})

这里需要注意的一点是,family处的名称就是使用时font-family的名称,举个例子,上方加载的字体这样使用:

1
2
3
.foo{
font-family:PingFangSC-Medium;
}

建议

由于字体可能会比较大,所以不建议在一个小程序中使用多种字体,这样会影响用户体验。为了保证界面效果,可以在onLoad周期加载字体,在success回调中执行后续操作,必要时加上Loading,让程序更加友好。

2018.12.28日更新:

结合实践,决定写得更详细一点,希望可以帮助到更多道友。

遇到的问题是下载字体时界面已经渲染完毕,导致字体显示不正确。解决方法的总体思路是在使用到该字体的容器中增加一个loading属性,当字体加载完毕后再显示布局,这样可以确保字体渲染正确。

注:下方代码使用了 wxPromise 以支援小程序API Promise化

1
2
3
<!-- mall.wxml -->
<view wx:if="{{loading}}" class="mall-root">
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- mall.js -->
Page({
data:{
loading:false
},
onLoad(){
this.loadFonts().then(()=>{
this.setData({
loading: true
})
})
},
methods:{
loadFonts(){
let PingFangMedium = wx.pro.loadFontFace({
family: 'PingFangSC-medium',
source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-medium.ttf")'
})

let PingFangRegular = wx.pro.loadFontFace({
family: 'PingFangSC-regular',
source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-regular.ttf")'
})
return Promise.all([PingFangMedium, PingFangRegular]).then((res) => {
console.log(res)
}
}
})