微信小程序使用苹方字体

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

第一种方式，base64 encode

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

第二种方式，官方API

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

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的名称，举个例子，上方加载的字体这样使用：

.foo{
    font-family:PingFangSC-Medium;
}

建议

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

2018.12.28日更新：

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

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

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

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

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