前言

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

怎么實(shí)現(xiàn)呢？

開(kāi)擼之前，先研究一下，探索一下技術(shù)方案。

技術(shù)難點(diǎn)

1. 微信限制

大家開(kāi)發(fā)過(guò)微信小程序的應(yīng)該都知道，微信平臺(tái)對(duì)小程序的體積大小有限制：

• 整個(gè)小程序所有分包大小不超過(guò) 20M

• 單個(gè)分包/主包大小不能超過(guò) 2M

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

2. 機(jī)型兼容

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

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

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

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

• 使用微信官方api —— wx.loadFontFace

經(jīng)過(guò)慎重考慮，我們最終采用了第二種方案。

文檔說(shuō)明

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

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

字體鏈接必須是同源下的，或開(kāi)啟了cors支持，小程序的域名是servicewechat.com

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

'2.10.0' 以前僅在調(diào)用頁(yè)面生效。

重要的事情再三強(qiáng)調(diào)：字體鏈接必須是同源下的，或開(kāi)啟了cors支持。

我當(dāng)時(shí)就是由于使用第三方cdn資源，但是沒(méi)有配置cors支持，導(dǎo)致安卓手機(jī)上一直不生效。而且比較難排查的另一個(gè)原因是，模擬器上和蘋果手機(jī)上沒(méi)有配置cors支持，但是依然生效，很奇怪。

體驗(yàn)優(yōu)化

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

字體閃動(dòng)的問(wèn)題相對(duì)來(lái)說(shuō)比較容易體驗(yàn)，在字體加載完成之前，添加了loading效果，而且在進(jìn)入入口的時(shí)候第一時(shí)間就開(kāi)始加載字體。

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

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

附微信小程序設(shè)置全局字體

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

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

結(jié)尾

到此這篇關(guān)于微信小程序中使用自定義字體的文章就介紹到這了,更多相關(guān)微信小程序使用自定義字體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論