第微信小程序中使用自定義字體的實現(xiàn)與體驗優(yōu)化目錄前言技術難點1.微信限制2.機型兼容文檔說明體驗優(yōu)化附微信小程序設置全局字體結尾

前言

前段時間，甲方爸爸提出一個比較個性化的需要：要在他們的小程序中使用他們購買過版權的特殊字體。好家伙，我瞬間萬馬奔騰，我三十米的大刀呢？奈何甲方爸爸就是上帝，甲方爸爸想到的我們要盡量是實現(xiàn)，甲方爸爸沒有想到的我們要提前實現(xiàn)。

怎么實現(xiàn)呢？

開擼之前，先研究一下，探索一下技術方案。

技術難點

1.微信限制

大家開發(fā)過微信小程序的應該都知道，微信平臺對小程序的體積大小有限制：

整個小程序所有分包大小不超過20M

單個分包/主包大小不能超過2M

出于這個限制，字體肯定沒有辦法放到本地資源中了，那就只有一條出路，將資源放到第三方cdn資源中。但是使用cdn資源有一點需要注意：需要配置合法域名。

2.機型兼容

經過初步測試，發(fā)現(xiàn)使用自定義字體在不同的機型上的兼容性有所出入，尤其是安卓手機。經過一定數(shù)量的測試得出一個粗淺的結論：ttf字體在iOS手機上兼容性比較好，在安卓機上會出現(xiàn)特殊機型失效的問題。

說到這里，我就忍不住吐槽兩句，這段時間進行機型適配的時候，華為鴻蒙和蘋果xs真的是折磨的我死去活來的，經常出現(xiàn)一些跟大眾機型與眾不同的問題。

經過一番查找，發(fā)現(xiàn)了兩種解決方案：

使用css樣式，引入多種字體類型，包含.ttf和.woff類型

使用微信官方apiwx.loadFontFace

經過慎重考慮，我們最終采用了第二種方案。

文檔說明

字體文件返回的contet-type參考font，格式不正確時會解析失敗。

字體鏈接必須是https（ios不支持http)

字體鏈接必須是同源下的，或開啟了cors支持，小程序的域名是

工具里提示Faildtoloadfont可以忽略

2.10.0以前僅在調用頁面生效。

重要的事情再三強調：字體鏈接必須是同源下的，或開啟了cors支持。

我當時就是由于使用第三方cdn資源，但是沒有配置cors支持，導致安卓手機上一直不生效。而且比較難排查的另一個原因是，模擬器上和蘋果手機上沒有配置cors支持，但是依然生效，很奇怪。

體驗優(yōu)化

雖然wx.loadFontFace是官方提供的api，但是有個體驗問題很是折磨：wx.loadFontFace每次進入頁面都會重新下載，而且會出現(xiàn)字體閃動。

字體閃動的問題相對來說比較容易體驗，在字體加載完成之前，添加了loading效果，而且在進入入口的時候第一時間就開始加載字體。

每次都加載的問題，通過惰性模式緩解了一下，但是沒有完全解決（由于cdn資源會進行緩存，所以考慮通過判斷緩存資源是否存在來判斷是否需要加載字體，但是很遺憾，還沒有實現(xiàn)），直接上一下現(xiàn)在的搓代碼吧。

letloadStatus=false;

if(!loadStatus){

wx.loadFontFace({

family:'...',

source:'url("...")',

success(){

loadStatus=ture;

});

附微信小程序設置全局字體

微信小程序設置全局css，需要在app.wxss文件中設置page的樣式

page{

fo