在先前的模組中，您已瞭解如何最佳化 HTML、CSS、JavaScript 和媒體資源，在本單元中，您將探索最佳化網路字型的一些方法。
網頁字型在載入時間和轉譯時間都會影響網頁效能。大型字型檔案可能需要一點時間才能下載，並對首次顯示內容繪製 (FCP) 造成負面影響，不正確的 font-display 值可能會導致不想要的版面配置位移，而造成頁面的累計版面配置位移 (CLS)。
在討論網路字型之前，瞭解瀏覽器發現這些字型的方式對您很有助益，以便瞭解 CSS 如何在特定情況下避免擷取不必要的網頁字型。
探索廣告活動
使用 @font-face 宣告，在樣式工作表中定義網頁的網路字型：
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
上述程式碼片段定義了名為 "Open Sans" 的 font-family，並告知瀏覽器可在何處找到個別網路字型資源。為了節省頻寬，瀏覽器在判斷目前網頁的版面配置需要網路字型之前，不會下載網路字型。
h1 {
font-family: "Open Sans";
}
在上述 CSS 程式碼片段中，瀏覽器剖析網頁 HTML 中的 <h1> 元素時，會下載 "Open Sans" 字型檔案。
preload
如果外部樣式表中已定義 @font-face 宣告，瀏覽器必須等到下載樣式表之後，才能開始下載這些宣告。這使得網頁字型在發掘資源後有所延遲，但也有方法可以協助瀏覽器更快發現網路字型。
您可以使用 preload 指令，提早對網頁字型資源發出要求。preload 指令會在網頁載入期間早期發現網頁字型，且瀏覽器會立即開始下載這些字型，無須等待樣式表完成下載及剖析作業。preload 指令會等到網頁需要字型後才會啟動。
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
內嵌 @font-face 宣告
您可以使用 <style> 元素在 HTML 的 <head> 中內嵌轉譯封鎖 CSS (包括 @font-face 宣告)，讓字型在網頁載入期間較早發現。在這種情況下，瀏覽器會在網頁載入的早期階段發現網路字型，因為不需要等待外部樣式工作表下載。
內嵌 @font-face 宣告的優點比使用 preload 提示來得重要，因為瀏覽器只會下載轉譯目前頁面所需的字型。因此可免除下載未使用的字型的風險。
下載
發現網路字型並確認這是目前頁面版面配置所需的項目後，瀏覽器就可以下載字型。網頁字型的數量、編碼和檔案大小都會大幅影響瀏覽器下載及轉譯網路字型的速度。
自行代管網路字型
網頁字型可透過 Google Fonts 等第三方服務提供，也可以自行管理來源。使用第三方服務時，您的網頁必須開啟與供應者網域的連線，才能開始下載所需的網路字型。這可能會延遲發現及後續下載網路字型的時間。
您可以使用 preconnect 資源提示來減少這個負擔。您可以利用 preconnect，指示瀏覽器在一般瀏覽器開啟跨來源連線的速度比一般瀏覽器來得快：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
上述 HTML 程式碼片段會提示瀏覽器與 fonts.googleapis.com 建立連線，以及與 fonts.gstatic.com 的 CORS 連線。部分字型供應程式 (例如 Google Fonts) 會從不同來源提供 CSS 和字型資源。
自行管理網路字型即可免除第三方連線的需求。在大多數情況下，自行管理網路字型會比從跨來源下載更快。如果您打算自行管理網路字型，請確認網站使用的是內容傳遞聯播網 (CDN)、HTTP/2 或 HTTP/3，並為網站需要的網路字型設定正確的快取標頭。
僅使用 WOFF2 和 WOFF2
WOFF2 具備廣泛的瀏覽器支援和最佳壓縮功能，比 WOFF 高出多達 30%。縮減檔案大小則會加快下載速度。如要與新型瀏覽器完全相容，通常只需要 WOFF2 格式。
部分網路字型
網頁字型通常包含多種不同的字符，這是代表不同語言中使用的各種字元的必要項目。如果您的網頁僅以一種語言提供內容，或使用單一字母，您就可以透過子設定縮減網頁字型的大小。一般而言，做法是指定數字或一系列 Unicode 碼點。
「子集」是原始網路字型檔案中的精簡字符組合。例如，網頁可能會針對拉丁字元提供特定子集，而不會提供所有字符。視所需的子集而定，移除字符可能會大幅縮減字型檔案大小。
部分網路字型供應商 (例如 Google Fonts) 會使用查詢字串參數自動提供子集。舉例來說，https://fonts.googleapis.com/css?family=Roboto&subset=latin 網址提供的樣式工作表採用 Roboto 網頁字型，但只有使用拉丁字母。
如果您決定自行代管網路字型，下一步就是使用 glyphanger 或 subfont 等工具自行產生及代管這些子集。
不過，如果您沒有自行託管網路字型的容量，可以指定額外的 text 查詢字串參數，僅包含網站所需的萬國碼 (Unicode) 程式碼點，藉此子集提供 Google Fonts 提供的網路字型。舉例來說，如果您的網站顯示網頁字型，只需要用到「Welcome」詞組所需的少量字元，您可以透過以下網址，透過 Google Fonts 要求該子集：https://fonts.googleapis.com/css?family=Monoton&text=Welcome。如果網站上的單一字體需要的網頁字型資料量會大幅減少，這樣做就能大幅減少。
字型顯示
在瀏覽器找到並下載網路字型後，就可以進行轉譯。根據預設，瀏覽器會封鎖任何使用網路字型的文字，直到下載完為止。您可以在使用 font-display CSS 屬性完整載入網站字型之前，調整瀏覽器的文字轉譯行為，以及設定要顯示或不要顯示的文字。
block
font-display 的預設值為 block。使用 block 時，瀏覽器會禁止轉譯使用指定網路字型的任何文字。不同瀏覽器的行為稍有不同。Chromium 和 Firefox 的封鎖轉譯作業最長不得超過 3 秒，之後才能使用備用選項。在網頁字型載入之前，Safari 會無限期封鎖。
swap
swap 是最廣泛使用的 font-display 值。swap 不會封鎖算繪，且會在替換指定網路字型前，立即在備用中顯示文字。這樣一來，您不必等待網頁字型下載就能立即顯示內容。
不過，swap 的缺點是，如果在 CSS 中指定的備用網路字型和 CSS 中指定的網路字型在行高、核心和其他字型指標方面有極大差異，會導致版面配置發生變化。如果您並未謹慎使用 preload 提示盡快載入網路字型資源，或者您不考慮其他 font-display 值，這可能會影響您網站的 CLS。
fallback
font-display 的 fallback 值會在 block 和 swap 之間遭到入侵。與 swap 不同，瀏覽器會封鎖字型，但只能在極短的時間內切換備用文字。不過與 block 不同，封鎖期間極短。
使用 fallback 值可在快速網路中順利運作。如果網路字型快速下載，網頁字型就會是頁面初始轉譯時立即使用的字體。但如果網路速度緩慢，系統會在封鎖期結束後優先顯示備用文字，然後在網頁字型收到時替換。
optional
optional 是最嚴格的 font-display 值，只有在 100 毫秒內下載時才會使用網路字型資源。如果網頁字型的載入時間過長，就不會在網頁上使用。當網頁字型在背景下載，並放入瀏覽器快取中時，瀏覽器就會使用針對目前的導覽設定的備用字體。
因此，後續瀏覽網頁可以立即使用已下載的網路字型。font-display: optional 會避免使用 swap 偵測到的版面配置位移，但如果使用者在初始頁面導覽頁面太晚到達網頁字型，就不會看到網頁字型。
字型示範
學以致用
瀏覽器何時會下載網路字型資源 (假設不是使用 preload 指令擷取資源)？
如要將網路字型提供給所有新式瀏覽器，唯一且最有效率的格式為何？
下一項：程式碼分割 JavaScript
瞭解字型最佳化後，現在可以繼續進行下一個單元。下個單元將探討一項主題，可以改善使用者的初始頁面載入速度，也就是透過程式碼分割功能延遲載入 JavaScript。這樣一來，您就可以在網頁的啟動階段 (使用者很有可能與網頁互動) 期間，盡可能減少頻寬和 CPU 爭用情況。