作者：蒼狼（筆名）
專案背景：
我們老闆為了給她一年級的女兒做漢字測試，叫我們做一個微信小程式，這樣方便，效率也高
很快，產品設計稿出來了，我也做完了，中間也零零星星提了很多小需求，都給完善了，但是有一個需求是：動態載入外部字型，因為他覺得小程式自帶的字型不好看，我是弄了好久，但總是不符合需求
中間也停了幾個月，去做其他專案了，然後我們領導發現有一個小程式用的是外部字型，領導想別人都能實現，那我也能實現，於是乎，就叫我繼續解決這個問題
我依稀記得還是當初的兩種方式：
第一種方式
根據微信小程式裡面的官方文件提供的api(wx.loadFontFace)具體的請參考下面的連結：
注意，下載的字型要放到線上，並且以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 坑）