微信小程序使用苹方字体

第一种方式，base64 encode

如果字体比较小，如各种英文字体，可以把字体上传到 Online @font-face generator — Transfonter 转换成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，让程序更加友好。

转载自：微信小程序使用苹方字体 | 黑人筆記

附 字体下载链接: 阿里云盘分享https://www.aliyundrive.com/s/4reGRugt8WE