微信小程式中使用自定義字型的實現與體驗優化

2022-02-21 13:05:42

前言

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

怎麼實現呢？

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

技術難點

1. 微信限制

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

整個小程式所有分包大小不超過 20M
單個分包/主包大小不能超過 2M

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

2. 機型相容

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

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

經過一番查詢，發現了兩種解決方案：

使用 css 樣式，引入多種字型型別，包含.ttf 和 .woff 型別
使用微信官方api —— wx.loadFontFace

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

檔案說明

字型檔案返回的 contet-type 參考 font，格式不正確時會解析失敗。

字型連結必須是https（ios不支援http)

字型連結必須是同源下的，或開啟了cors支援，小程式的域名是servicewechat.com

工具裡提示 Faild to load font可以忽略

'2.10.0' 以前僅在呼叫頁面生效。

重要的事情再三強調：字型連結必須是同源下的，或開啟了cors支援。

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

體驗優化

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

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

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

    let loadStatus = false;
    if (!loadStatus) {
        ```
    wx.loadFontFace({
      family: '...',
      source: 'url("...")',
      success() {
          loadStatus = ture;
      }
    });

附微信小程式設定全域性字型

微信小程式設定全域性css，需要在app.wxss檔案中設定page的樣式

page {
  font-family:"PingFangSC-Thin";
   font-size:32rpx;          /*微信小程式中，使用rpx做單位*/
}

結尾

到此這篇關於微信小程式中使用自定義字型的文章就介紹到這了,更多相關微信小程式使用自定義字型內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！