縮小網頁字型大小

Ilya Grigorik
Ilya Grigorik
X 首頁
Jeremy Wagner

字體排版對於設計、品牌宣傳、可讀性和無障礙程度至關重要。網站字型具備上述所有功能，還有其他其他功能：文字可供選取、搜尋、縮放且支援高 DPI，無論螢幕大小和解析度為何，都能呈現一致且清晰的文字轉譯效果。WebFonts 是良好設計、使用者體驗和效能的關鍵。

網站字型最佳化是整體成效策略的關鍵要素。每個字型都是一項額外資源，部分字型可能會封鎖文字轉譯作業，只是因為網頁使用 WebFonts 並不代表轉譯速度必須變慢。相反地，經過最佳化的字型，加上在網頁上載入和套用字型的明確策略，有助於縮減網頁總大小，並縮短網頁轉譯時間。

網頁字型剖析

網路字型是一組字符，每個字符則是描述字母或符號的向量形狀。因此，可決定特定字型檔案大小的兩個簡單變數：每個字符的向量路徑複雜度，以及特定字型的字符數量。舉例來說，Open Sans 是最熱門的 WebFonts 之一，並包含 897 個字符，包括拉丁、希臘和斯拉夫字元。

字型字符表格

選擇字型時，務必考量支援的字元集。如果您需要翻譯成多種語言的網頁內容，應該使用可為使用者提供一致外觀和風格的字型。舉例來說，Google 的 Noto 字型系列可支援全世界所有語言。不過請注意，在所有語言中，Noto 的總大小會產生 1.1 GB 以上的 ZIP 檔案。

您可以在這篇文章中，瞭解如何減少網頁字型的檔案大小。

網站字型格式

目前，網路上使用兩種建議的字型容器格式：

WOFF 和 WOFF 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 at-rule 可讓您定義特定字型資源的位置、樣式特性，以及該字型資源要使用的萬國碼 (Unicode) 碼點。此類 @font-face 宣告的組合可以用來建構「字型系列」，瀏覽器用來評估需要下載並套用至目前頁面的字型資源。

考慮使用可變字型

如果需要多種字型變化版本，變數字型可大幅縮減字型的檔案大小。您可以載入包含所有資訊的單一檔案，而不必載入一般樣式和粗體樣式以及斜體版本。不過，字型大小不定的字型檔案會大於個別字型變化版本，但尺寸小於許多變化版本的組合。與其使用一個大型變數字型，建議您優先提供關鍵字型變化版本，並在稍後下載其他變化版本。

所有新版瀏覽器現在都支援可變字型，詳情請參閱網頁版變數字型簡介。

選取合適的格式

每個 @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. 確認需要的子集：
    • 如果瀏覽器支援萬國碼範圍子設定，就會自動選取正確的子集。網頁只需要提供部分檔案，並在 @font-face 規則中指定適當的萬國碼範圍。
    • 如果瀏覽器不支援萬國碼 (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 範圍，以便只提供特定網頁所需的字符。這樣可以縮減檔案大小並提高資源的下載速度。不過，在定義子集時，請小心針對重複使用的字型進行最佳化調整。例如，請不要在每個網頁上下載不同但重疊的字元集。建議您根據指令碼進行子集，例如拉丁文和斯拉夫文。
  • 在 src 清單中優先採用 local()：在 src 清單中先列出 local('Font Name')，可確保不會對已安裝的字型發出 HTTP 要求。
  • 使用 Lighthouse 測試文字壓縮。

對最大內容繪製 (LCP) 和累計版面配置位移 (CLS) 的影響

文字節點可能屬於最大內容繪製 (LCP) 項目，因頁面內容而異。因此，請務必按照本文提供的建議，盡可能縮小網頁字型，讓使用者盡快看到您網頁上的文字。

如果您擔心在最佳化處理期間，網頁文字因為大型網路字型資源而無法顯示，但 font-display 屬性提供了一些設定，可協助您在下載字型時避免顯示隱藏的文字。不過，使用 swap 值可能會造成大幅調整版面配置位移，進而影響網站的累計版面配置位移 (CLS)。建議盡可能使用 optional 或 fallback 值，

如果您的網頁字型對品牌宣傳而言至關重要，甚至會影響使用者體驗，不妨預先載入字型，讓瀏覽器可以先開始要求字型。如果使用 font-display: swap，可縮短替換期；如果未使用 font-display，則會縮短封鎖期間。