這篇是總結對於中文字型瘦身的文章,要延續上篇[WordPress]關於網頁中文字型瘦身-②文章,並透過HTTP/2做多執行緒傳輸(同時間做多路傳輸)

首先參考之前的文章

[WordPress]網頁中文字型瘦身:使用子集化工具讓字體容量縮小
[WordPress]關於網頁中文字型瘦身-②:針對已經子集化的字型,再分割出幾個檔案

之前提到將利用HTTP/2的多執行緒特點,我把字型再更加分割,使描繪字型的方式可以更快完成(原本的話會需要整個字型都讀取完後才會開始描繪字體)

雖然中間一度偷懶沒有更新這裡的文章,但其實能夠找到相關文章的資源並不多(可能中文網都不見得可以找到可以解決的方式),總之首先完成前面兩個步驟(字體子集化且子集化後的檔案再分割成數個檔案),接下來請按照幾個步驟進行

※這邊要先提醒的是,此方式是採用Astra的佈景主題,所以配合使用的插件也是用在Astra佈景主題上,其他的佈景主題是否可沿用就由觀眾你們來試看看才知道了(或許找類似插件亦可達到類似效果)

Step 1: 安裝Custom Fonts插件並設定

首先到安裝外掛的頁面搜尋「 Custom Fonts 」並安裝

搜尋「Custom Fonts」
在安裝外掛的地方搜尋「Custom Fonts」

接下來再到剛剛安裝的插件:在「外觀」→「Custom Fonts」的順序進入

填入自己記得的名稱
填入自己記得的名稱,我自己本身取一個叫做「WebSubsetFont」,然後在.woff2格式字型的地方按一下「上傳」按鈕選擇之前分割過字型的檔案(基本上分割後會不止一個檔案)

依序「外觀」→「Custom Fonts」選項

按下「Add Font Variation」按鈕後會再出現一樣的欄位
按下「Add Font Variation」按鈕後會再出現一樣的欄位,再把其他分割的檔案同樣填入完後,最後按下「新增字型」按鈕

「自訂」選項
如果在登入WordPress後台的狀況下,進入到首頁可以看到「自訂」選項

選擇「Global」
選擇「Global」

選擇「Typography」
選擇「Typography」

「Body Font Family」和「Heading Font Family」選擇剛剛取名的名稱
「Body Font Family」和「Heading Font Family」選擇剛剛取名的名稱(我是以「WebSubsetFont」做為名稱)

Step 2: 寫入額外的CSS語法

同樣從「自訂」進入,拉到最下面找「附加的CSS」選項
同樣從「自訂」進入,拉到最下面找「附加的CSS」選項
填入相關的CSS語法
填入相關的CSS語法

這裡提供我自己撰寫的語法供參考,請自行改造內容

/**
/**字型分割測試*/

/* Part [1] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_1.woff2) format('woff2');
  unicode-range:U+0021-007E,U+00AF,U+00B1,U+00B7,U+00D7,U+00F7;
}

/* Part [2] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_2.woff2) format('woff2');
  unicode-range:U+02C7,U+02D9,U+2160-22BF,U+2460-247D,U+3001-3129,U+3220-3229,U+33D1,U+33D2,U+FFE3,U+FFE5;
}

/* Part [3] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_3.woff2) format('woff2');
  unicode-range:U+4E00-55EF;
}

/* Part [4] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_4.woff2) format('woff2');
  unicode-range:U+55F7-66A6;
}

/* Part [5] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_5.woff2) format('woff2');
  unicode-range:U+66A8-8317;
}

/* Part [6] */
@font-face {
  font-family: 'WebSubsetFont';  
  src: url(https://cyrians.com/wp-content/uploads/2021/07/WebSubsetFont_6.woff2) format('woff2');
  unicode-range:U+8327-9F9F;
}

然後接著去Webpagetest網頁做測試

讀取已分割的字形檔
可以確認到有讀取已分割的字形檔(.woff2)

最後確認一下頁面字型是否都有正常讀取即可

以上為[WordPress]關於網頁中文字型瘦身-③(完結),希望能夠幫助你

參考資料:

Web FontによるCore Web Vitalsへの影響と使い続ける方法

 

如果這篇文章有幫助到您,請幫我點擊拍手按鈕 5 下鼓勵我
只要花 30 秒登入 FB 或 Google,不用花任何錢就能支持我
您的支持將會是我創作的最大動力!

關於作者

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top