微信小程式使用自定義字型的三種方法

一、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上傳檔案，formats只勾選ttf就行。可以將字型轉換成base64的face-font，複製到wxss裡面就可以使用。但是缺點也很明顯，小程式最大體積限制只能2m，隨便一箇中文字型就超過了。

四、總結

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

工具上的預覽：

Android真機預覽：

所以真的沒辦法了嗎？？