微信小程序使用自定義字體的三種方法

1、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)
  }
})
複製代碼

2、face-font url

傳統的css規則，跟loadFontFace限制同樣，必須https且同源，不支持canvas等原生組件，不支持本地文件。

菜鳥教程

演示代碼：

@font-face {
    font-family: 'FZSuXSLSJW';
    src: url("https://we7.stuyun.com/FZSuXSLSJW.ttf")
}
複製代碼

3、face-font base64

網上教程常介紹的方法，到transfonter上傳文件，formats只勾選ttf就行。能夠將字體轉換成base64的face-font，複製到wxss裏面就能夠使用。可是缺點也很明顯，小程序最大致積限制只能2m，隨便一箇中文字體就超過了。

4、總結

本來計劃是使用canvas實現圖片編輯，而且添加可自定義文字，而後就嘗試一下可否更換字體，無奈嘗試了上面的三種方法都不和我意。前兩種方法在工具上預覽是能夠的，可是在安卓和iOS真機上，canvas上都無效。而第三種方法太浪費空間資源，2m的包大小限制直接淘汰了。

工具上的預覽：

Android真機預覽：

因此真的沒辦法了嗎？？