uniapp加載第三方字體（微信小程序、h5測試通過）

方法一：CSS本地加載

• 實例

  App.vue

  @font-face {
       font-family: test1-icon;
       src: url('~@/static/iconfont.ttf');
   }
  

• 優點

  • 方便，字體下載下來就能引入

• 缺點

  • 正如uniapphttps://uniapp.dcloud.io/frame?id=字體圖標中說的一樣

  

  • 小程序不支持在css中使用本地文件，包括本地的背景圖和字體文件，需以base64方式方可使用。

方法二：CSS遠程加載

• 實例：

  App.vue文件

  @font-face{
      font-family: font-name;
      src:url('https://XXXXX/font.ttf');
  }
  

  在h5頁面是沒有問題的，在微信小程序的開發者工具里面有用，但是（安卓）真機調試沒有用

• 優點

  • 不用占用本地代碼容量，微信小程序發布的代碼主包壓縮后不能超過2M，所以將這些靜態資源放到服務器上是一個很好的節省容量的方法
  • 內存小的話可以全部字體都放進去

• 缺點

  • 微信小程序（安卓）真機沒有效果，只有h5有用

  • 

    字體文件太大即沒有用

方法三：CSS本地引入base64的CSS文件

• 用工具將ttf文字文件，轉成base64形式，並通過css引入

  https://www.giftofspeed.com/base64-encoder/這個網站可以將ttf文件轉成base64，

  

  網站下面有三種方法引入，我選的是最后一種，因為我放進去的是ttf文件，所以也是用最下面那種方法，可以新建一個文件

  font-name.css

  @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}
  

  App.vue

  @import '~@/static/font/font-name.css';
  

• 優點

  • 不用操作服務器，可以本地隨時引入或者刪除

• 缺點

  • 對於小的字體文件，這個方法在h5和小程序端都有用，但是對於大的字體文件，卻沒有用，這是因為

方法四：使用API uni.loadFontFace()

• 實例

  uni.loadFontFace({
    family: 'Bitstream Vera Serif Bold',
    source: 'url("https://sungd.github.io/Pacifico.ttf")',
    success() {
        console.log('success')
    }
  })
  

• API說明：https://uniapp.dcloud.io/api/ui/font?id=loadfontface，微信小程序的開發文檔也有對應的方法，需要特別注意的是：

  

• 另外還有注意的是在這個討論中https://developers.weixin.qq.com/community/develop/doc/0006aa31bdcae81b69883ff4a50000?_at=1606209721365 ，小程序技術專員提到的

方法五：提取需要的文字，並用方法三引入

• 工具：https://www.lcddjm.com/font
• 將提取后生成的ttf文件放入方法三中提到的工具里，並用方法三的方式引入
• 該方法只適用於，第三方字體文件是靜態不變化的
• 在h5和小程序端都有用

綜上所述

​ 因為工作時間不便反復測試，所以很多出現問題的原因都沒有深究，只是找到了解決方法后就停止了，現在做的項目只需要兼容h5和微信小程序端，所以在其它端並沒有測試，僅作參考。