微信小程序動態加載外部字體的完美解決方案

做者：蒼狼（筆名） 

項目背景：

咱們老闆爲了給她一年級的女兒作漢字測試，叫咱們作一個微信小程序，這樣方便，效率也高

很快，產品設計稿出來了，我也作完了，中間也零零星星提了不少小需求，都給完善了，可是有一個需求是：動態加載外部字體，由於他以爲小程序自帶的字體很差看，我是弄了很久，但老是不符合需求

中間也停了幾個月，去作其餘項目了，而後咱們領導發現有一個小程序用的是外部字體，領導想別人都能實現，那我也能實現，因而乎，就叫我繼續解決這個問題

我依稀記得仍是當初的兩種方式：

第一種方式

根據微信小程序裏面的官方文檔提供的api( wx.loadFontFace)具體的請參考下面的連接：

developers.weixin.qq.com/miniprogram…

注意，下載的字體要放到線上，而且以https開頭才行

這個方式的缺點：首次加載也有點慢，有的手機能明顯看到字體從當前字體變成外部字體, 我來貼一下demo:

wxml:

<view class="container">

<view class="page-body">

<view class="page-section">

<view class="page-body-info display-area {{ loaded ? 'font-loaded' : '' }}">

<text wx:if="{{!loaded}}">Load {{ fontFamily }}</text>

<text wx:else>{{ fontFamily }} is loaded</text>

</view>

<view class="btn-area">

<button type="primary" bindtap="loadFontFace">加載字體</button>

</view>

</view>

</view>

</view>

wxss:

.page-body-info {

align-items: center;

padding: 200rpx 0;

}

.font-loaded {

font-family: "Bitstream Vera Serif Bold";

}

.display-area {

font-size: 40rpx;

display: flex;

justify-content: center;

}

js:

Page({

data: {

fontFamily: 'Bitstream Vera Serif Bold',

loaded: false,

},

onLoad() {

this.setData({

loaded: false

})

},

loadFontFace() {

const self = this

wx.loadFontFace({

family: this.data.fontFamily,

source: 'url("https://sungd.github.io/Pacifico.ttf")',

success(res) {

console.log(res.status)

self.setData({ loaded: true })

},

fail: function(res) {

console.log(res.status)

},

complete: function(res) {

console.log(res.status)

}

});

}

})

依照這個代碼，根據本身的需求隨意更改就行，可是會看到字體的變化 (缺點： 這種體驗確定是不太好的，若是不太注重體驗那就另一說哈)

第二種方式

經過網站 transfonter.org/ 添加你的字體庫，具體步驟以下：

注意必定要選中 Base64 encode 的TTF格式，Convert 後下載轉換後的壓縮包，並將其中的stylesheet.css 換後綴名爲wxss，而後放到你的項目文件夾，而且在須要用的文件中引入這個wxss文件，好比個人爲下：

這中間遇到了一個大坑： 超過2048kb 沒法上傳，這個相信你們都遇到過，我要說的重點來了：

來到這個網站： www.zhaozi.cn/ 搜索你要的字體，在列表中挨個找，找到最小號的字體下載，儘可能找不超過2M的，而後按照上面說的步驟就能夠啦，咱們的項目需求是點擊按鈕切換下一個字：最開始用的是跳轉頁面，如今解決了超過2M的bug,可是因爲點擊按鈕跳轉頁面，有一個加載字體的過程，雖然時間很短，可是總歸是體驗不太好，因此我想了一個辦法

個人思路是這樣的：就在當前頁面切換下一個字，不跳轉頁面，這樣就只是初始的時候加載了一次字體，切換下一個字的時候就不會出現閃一下的感受

這第二種方式 解決了兩個問題 （初始狀態文字的變化bug以及跳轉頁面的時候閃一下的bug) , 還有就是上面的勾選，.ttf woff等等，選擇其中一個，我是一個個試出來的，點擊去看裏面的stylesheet.css文件大小，通常不超過2M就行，按照我上述的步驟來一步一步實現，那麼，恭喜你，微信小程序動態加載外部字體的效果完美實現了

下面是我實現後的效果：

小夥伴們有其餘更優的解決方案請留言哦，不清楚細節的能夠加個人微信交流 

個人微信號碼：yunian1005

對了，歡迎你們跟我交流微信小程序遇到的坑，咱們共同進步！（關鍵詞：小程序 bug 坑）