微信小程序（筆記）——小程序中使用自定義字體

一、引用網址

想要使用自定義字體需要引入外部字體庫，首先下載自己需要的字體，下載完成之后是 *.ttf 文件或者 *.TTF 文件，將文件放在自家服務器上引用鏈接使用。

使用默認字體是這樣

微信有動態下載字體的方法

    wx.loadFontFace({
      family: 'GJGMedium',
      source: 'url("https://zijiadewangzhi.com/font/GenJyuuGothic-Medium.ttf")',
      success(res){
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
      },
      complete: function (res) {
        console.log(res)
      }
    })

　　

返回這個是下載成功了

這樣是失敗了

 

如果一直報錯這個沒關系，不用管

 

 注意：鏈接使用 https 開頭

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

 缺點：下載失敗的時候沒有說明原因，但是我用的大部分字體都是沒問題的

二、壓縮字體

因為我用的特殊字體文字很少，引用整個字體庫很占空間，所以我找到了一個壓縮字體庫的辦法，只把需要的字體提取出來

沒有壓縮前：2.73MB

 

 

首先下載一個軟件 【 Fontmin 】，使用起來很簡單

官方網址：https://ecomfe.github.io/fontmin/

下載之后是壓縮包

 

 

 解壓得到兩個文件

 

 

 打開軟件是這樣的

 

 

左邊文本片段輸入用到的文字，把下載好的字體庫拖拽到左下方，點擊生成

 

 

 成功之后得到一個文件夾，里邊有各種格式的字體庫

 

 

 可以看到壓縮后的 *.TTF 文件 只有 5KB，但是我們不需要這個，需要的是最后一個 *.css 文件，用記事本打開，把它復制到小程序 app.wxss 文件

 

 

 只留下最多的這個 url(data:...) 這個就行

　　

 

成功！