小程序苹方字体

（转载的。不是侵权，csdn，转载的不让编辑，我主要是用来做笔记的，请勿攻击）
第一种方式，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，让程序更加友好。

---

以下来自掘金
微信小程序使用自定义字体的三种方法
一、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)
}
})
二、face-font url
传统的css规则，跟loadFontFace限制一样，必须https且同源，不支持canvas等原生组件，不支持本地文件。
@font-face {
font-family: ‘FZSuXSLSJW’;
src: url(“https://we7.stuyun.com/FZSuXSLSJW.ttf”)
}
三、face-font base64
网上教程常介绍的方法，到transfonter（转换工具网址https://transfonter.org/）上传文件，formats只勾选ttf就行。可以将字体转换成base64的face-font，复制到wxss里面就可以使用。但是缺点也很明显，小程序最大体积限制只能2m，随便一个中文字体就超过了。
四、总结
原本计划是使用canvas实现图片编辑，并且添加可自定义文字，然后就尝试一下能否更换字体，无奈尝试了上面的三种方法都不和我意。前两种方法在工具上预览是可以的，但是在安卓和iOS真机上，canvas上都无效。而第三种方法太浪费空间资源，2m的包大小限制直接淘汰了。
作者：郭靈纹
链接：https://juejin.im/post/5cd0402bf265da038932a88e
来源：掘金