縮小網頁字型大小

如要打造優秀的設計、品牌宣傳、可讀性和無障礙體驗,字體排版是良好基礎。網頁字型可支援上述所有功能,還有更多優點:文字可供選取、搜尋及縮放,且支援高 DPI,無論螢幕大小和解析度為何,都能呈現一致且清晰的文字轉譯效果。WebFonts 是優質設計、使用者體驗和效能的關鍵。

網站字型最佳化是整體成效策略的一大關鍵。每種字型都是額外的資源,某些字型可能會阻擋轉譯文字。不過,光是網頁使用 WebFonts,並不代表網頁轉譯速度會變慢。相反地,經過最佳化的字型,再加上關於如何在網頁上載入和套用它們的審慎策略,將有助於縮減網頁大小並改善網頁轉譯時間。

網路字型剖析

網路字型是一組字符,每個字符都是描述字母或符號的向量形狀。因此,有兩個簡單的變數會決定特定字型檔案的大小:每個字符的向量路徑複雜度,以及特定字型中的字符數量。舉例來說,Open Sans 是最熱門的 WebFonts 之一,其中包含 897 個字符,包括拉丁文、希臘文和西里爾字母。

字型字符表格

選擇字型時,請務必考量支援的字元集。如果您需要將網頁內容翻譯成多種語言,請使用可為使用者提供一致的外觀與體驗的字型。舉例來說,Google 的 Noto 字型系列支援全世界所有語言。不過請注意,若一併考量所有語言,則 Noto 總大小會下載 1.1 GB 以上的 ZIP 檔案。

在這篇文章中,您將瞭解如何縮減網路字型的檔案大小。

網站字型格式

目前網路上有兩種建議的字型容器格式:

WOFFWOFF 2.0 則享有廣泛的支援,且受所有新世代瀏覽器支援。

  • 將 WOFF 2.0 變體提供給新型瀏覽器。
  • 如果絕對必要 (例如,如果您仍需支援 Internet Explorer 11),請將「WOFF」設為備用選項。
  • 或者,請考慮不要在舊版瀏覽器上使用網頁字型,並改用系統字型。若是較舊、較受限的裝置,效能可能較高。
  • 由於 WOFF 和 WOFF 2.0 能涵蓋所有仍在使用的新式和舊版瀏覽器,因此不再需要使用 EOT 和 TTF,而且可能會縮短網頁字型下載時間。

網頁字型和壓縮

WOFF 和 WOFF 2.0 都內建壓縮功能。WOFF 2.0 的內部壓縮使用 Brotli,提供的壓縮功能比 WOFF 提升多達 30%。詳情請參閱 WOFF 2.0 評估報告

最後值得注意的是,某些字型格式包含額外的中繼資料 (例如字型提示核心資訊),某些平台可能不需要這些資訊,方便進一步最佳化檔案大小。舉例來說,Google Fonts 會維護每種字型的 30 多種變化版本,自動偵測並放送最適合每個平台和瀏覽器的變化版本。

使用 @font-face 定義字型系列

@font-face CSS 規則可讓您定義特定字型資源的位置、樣式特性,以及應使用之 Unicode 碼點。這類 @font-face 宣告的組合可用來建構「字型系列」。瀏覽器會使用這個 ID 評估需要下載哪些字型資源,並套用至目前網頁。

考慮使用可變字型

如果您需要字型的多種變化版本,可變字型可以大幅縮減字型檔案大小。您不用載入一般樣式、粗體樣式和斜體版本,只要載入包含所有資訊的單一檔案即可。不過,可變的字型檔案大小會大於個別字型變化版本,但比許多變化版本的組合更小。比起使用單一大型字型,最好先提供重要的字型變化版本,之後再下載其他變化版本。

所有新式瀏覽器現在都支援可變字型,詳情請參閱網路上的變數字型簡介

選取合適的格式

每項 @font-face 宣告都會提供字型系列的名稱,該名稱是多個宣告的邏輯群組、字型屬性 (例如樣式、粗細和延展) 以及 src 描述元,可指定字型資源的優先順序清單。

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

首先請注意,上述範例定義了單一 Awesome Font 系列以及兩種樣式 (一般和斜體) 系列,每個樣式都指向不同的字型資源。反過來說,每個 src 描述元都包含優先且以半形逗號分隔的資源變化版本清單:

  • local() 指令可讓您參照、載入及使用本機安裝的字型。如果使用者的系統中已安裝該字型,這會完全繞過網路,且速度最快。
  • url() 指令可讓您載入外部字型,並允許加入選用的 format() 提示,指出指定網址參照的字型格式。

當瀏覽器判定需要字型時,會依照指定的順序疊代提供的資源清單,然後嘗試載入適當的資源。例如,在上方範例中:

  1. 瀏覽器會執行網頁版面配置,並判斷需要哪些字型變化版本才能在網頁上轉譯指定的文字。瀏覽器不會下載不屬於網頁 CSS 物件模型 (CSSOM) 中的字型,因為系統並非必要。
  2. 瀏覽器會針對每個需要的字型檢查該字型是否在本機可用。
  3. 如果無法在本機使用字型,瀏覽器會疊代外部定義:
    • 如有格式提示,瀏覽器會先檢查是否支援提示,再開始下載。如果瀏覽器不支援提示,瀏覽器會改用下一個提示。
    • 如果沒有格式提示,瀏覽器會下載資源。

本機與外部指令搭配適當的格式提示,可讓您指定所有可用的字型格式,並讓瀏覽器處理其餘的字型。瀏覽器會判斷需要的資源並選取最佳格式,

Unicode 範圍子設定

除了樣式、粗細和延伸等字型屬性之外,@font-face 規則還可讓您定義各資源支援的一組 Unicode 碼點。如此一來,您就能將大型 Unicode 字型分割成更小的子集 (例如拉丁文、斯拉夫文和希臘文子集),並僅下載在特定頁面上轉譯文字所需的字符。

unicode-range 描述元可讓您指定以半形逗號分隔的範圍值清單,每個值可採用以下三種格式之一:

  • 單一碼點 (例如 U+416)
  • 間隔範圍 (例如 U+400-4ff):表示特定範圍的開始和結束碼點
  • 萬用字元範圍 (例如 U+4??):? 字元表示任何十六進制數字

舉例來說,您可以將 Awesome Font 系列拆成拉丁文和日文 子集,瀏覽器則會視需要分別下載:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

使用萬國碼 (Unicode) 範圍子集和每個字型變化版本的個別檔案,您就能定義複合字型系列,不但速度更快,下載時也更有效率。訪客只會下載所需的變數和子集合,且不必強制下載自己可能不會看到或使用在網頁上的子集。

幾乎所有瀏覽器都支援 unicode-range。如要與舊版瀏覽器相容,請改回「手動子設定」。在這種情況下,您必須改回提供包含所有必要子集的單一字型資源,並在瀏覽器中隱藏其餘部分。舉例來說,如果網頁只有拉丁字元,您就可以去除其他字符,並將該特定子集做為獨立資源。

  1. 決定所需的子集:
    • 如果瀏覽器支援 Unicode 範圍子設定,將自動選取正確的子集。網頁只需要提供子集檔案,並在 @font-face 規則中指定適當的 Unicode 範圍即可。
    • 如果瀏覽器不支援 Unicode 範圍子設定,網頁就必須隱藏所有不必要的子集;也就是說,開發人員必須指定所需的子集。
  2. 產生字型子集:
    • 使用開放原始碼 pyftsubset 工具來對字型進行子集和最佳化。
    • 根據預設,某些字型伺服器 (例如 Google Font) 會自動進行子集。
    • 部分字型服務允許透過自訂查詢參數手動進行子設定,您可以運用這些參數手動指定網頁所需的子集。請參閱字型提供者的說明文件。

選取字型及合成

每個字型系列可能由多種樣式變化 (一般、粗體、斜體) 以及每種樣式的多種粗細組成。每個每個字符的字符形狀可能都非常不同,例如間距不同、大小,或全然不同的形狀。

字型粗細

上圖說明提供三種粗體粗細的字型系列:

  • 400 (一般)。
  • 700 (粗體)。
  • 900 (額外粗體)。

其他子類之間的所有其他變數 (以灰色表示) 都會自動對應至瀏覽器最接近的變化版本。

如果指定的體重不存在,系統就會使用有附近體重的臉孔。一般來說,粗體的權重會對應到權重較高和體重較高的臉孔,對應至權重較低的臉孔。

CSS 字型比對演算法

類似的邏輯也適用於「斜體」變化版本。此外,字型設計人員能夠控管系統產生的變化版本,您也可以控管要在網頁上使用哪些變化版本。由於每個變化版本都是獨立的下載項目,因此建議您盡量減少變化版本數量。舉例來說,您可以為 Awesome Font 系列定義兩個粗體變化版本:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

上述範例宣告了 Awesome Font 系列,該系列包含兩項資源,這些資源涵蓋同一組拉丁字符 (U+000-5FF),但提供兩種不同的「權重」:一般 (400) 和粗體 (700)。不過,如果其中一項 CSS 規則指定了不同的字型粗細,或將 font-style 屬性設為 italic,則會有什麼影響?

  • 如果找不到完全相符的字型,瀏覽器會替換最相符的字型。
  • 如果找不到任何樣式比對 (例如上述範例中並未宣告斜體變體),瀏覽器就會合成專屬的字型變化版本。
字型合成

上方範例是 Open Sans 的實際字型與合成字型搜尋結果的差異。所有合成的變化版本都是由單一 400 字型的單一字型產生。如您所見,結果會有明顯的差異。詳細說明如何產生粗體和斜體變化版本。因此結果會因瀏覽器而異,且有很大差異。

網站字型大小最佳化檢查清單

  • 查核及監控字型使用情況:請勿在網頁上使用過多字型;每種字型也應減少使用變體的數量。這有助於為使用者提供更一致且更快的體驗。
  • 盡量避免使用舊版格式:EOT、TTF 和 WOFF 格式大於 WOFF 2.0。EOT 和 TTF 是絕對不必要的格式,如果您需要支援 Internet Explorer 11,則可以選擇 WOFF。如果您只指定新版瀏覽器,只使用「WOFF 2.0」是最簡單也最效能的選項。
  • 對您的字型資源進行部分擷取:許多字型可以進行部分擷取或劃分為多個 unicode-range,方便只提供特定網頁需要的字符,這樣可以縮減檔案大小並提升資源的下載速度。但是,定義子集時,請謹慎針對字型重複利用進行最佳化。舉例來說,您不需要在每個網頁上下載不同但重疊的字元集。A 罩杯 建議做法是根據腳本來劃分部分,例如拉丁文和斯拉夫文。
  • 指定 src 清單中的 local()src 清單中優先列出 local('Font Name'),確保系統不會對已安裝的字型發出 HTTP 要求。
  • 使用 Lighthouse 測試文字壓縮

對 Largest Contentful Paint (LCP) 和累計版面配置位移 (CLS) 的影響

視網頁內容而定,系統可能會將文字節點視為最大內容繪製 (LCP) 的候選文字。因此,依循本文的建議,盡量讓您的網頁字型越小,使用者盡可能看到網頁上的文字。

如果您有一點可改善,但網頁文字因大型網頁字型資源而過久顯示時間可能過長,您可以利用 font-display 屬性的多項設定,在下載字型時避免隱藏文字。不過,使用 swap 值可能會導致大量的版面配置位移,影響網站的累計版面配置位移 (CLS)。如果可以,建議使用 optionalfallback 值。

如果您的網路字型對品牌宣傳至關重要 (也是使用者經驗),請考慮預先載入字型,讓瀏覽器得以要求這些字型。如果使用 font-display: swap,這麼做可縮短交換週期。如果您沒有使用 font-display,則可縮短交換期。