如要打造優秀的設計、品牌宣傳、可讀性和無障礙體驗，字體排版是良好基礎。網頁字型可支援上述所有功能，還有更多優點：文字可供選取、搜尋及縮放，且支援高 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 規則可讓您定義特定字型資源的位置、樣式特性，以及應使用之 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()提示，指出指定網址參照的字型格式。
當瀏覽器判定需要字型時，會依照指定的順序疊代提供的資源清單，然後嘗試載入適當的資源。例如，在上方範例中：
- 瀏覽器會執行網頁版面配置，並判斷需要哪些字型變化版本才能在網頁上轉譯指定的文字。瀏覽器不會下載不屬於網頁 CSS 物件模型 (CSSOM) 中的字型，因為系統並非必要。
- 瀏覽器會針對每個需要的字型檢查該字型是否在本機可用。
- 如果無法在本機使用字型，瀏覽器會疊代外部定義：
- 如有格式提示，瀏覽器會先檢查是否支援提示，再開始下載。如果瀏覽器不支援提示，瀏覽器會改用下一個提示。
- 如果沒有格式提示，瀏覽器會下載資源。
本機與外部指令搭配適當的格式提示，可讓您指定所有可用的字型格式，並讓瀏覽器處理其餘的字型。瀏覽器會判斷需要的資源並選取最佳格式，
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。如要與舊版瀏覽器相容，請改回「手動子設定」。在這種情況下，您必須改回提供包含所有必要子集的單一字型資源，並在瀏覽器中隱藏其餘部分。舉例來說，如果網頁只有拉丁字元，您就可以去除其他字符，並將該特定子集做為獨立資源。
- 決定所需的子集：
- 如果瀏覽器支援 Unicode 範圍子設定，將自動選取正確的子集。網頁只需要提供子集檔案，並在
@font-face規則中指定適當的 Unicode 範圍即可。 - 如果瀏覽器不支援 Unicode 範圍子設定，網頁就必須隱藏所有不必要的子集；也就是說，開發人員必須指定所需的子集。
- 如果瀏覽器支援 Unicode 範圍子設定，將自動選取正確的子集。網頁只需要提供子集檔案，並在
- 產生字型子集：
- 使用開放原始碼 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)。如果可以，建議使用 optional 或 fallback 值。
如果您的網路字型對品牌宣傳至關重要 (也是使用者經驗)，請考慮預先載入字型，讓瀏覽器得以要求這些字型。如果使用 font-display: swap，這麼做可縮短交換週期。如果您沒有使用 font-display，則可縮短交換期。