在載入網路字型時決定行為，是一種重要的效能調整技巧。新的 @font-face 字型顯示描述元可讓開發人員根據載入所需時間，決定網頁字型的轉譯 (或備用) 方式。
現今的字型顯示差異
Web Fonts 可讓開發人員在專案中納入豐富的字體排版，而無需考量使用者尚未擁有瀏覽器字型也得花時間下載。由於網路可能不穩定，因此這個下載時間可能會對使用者體驗造成負面影響。畢竟，如果文字需要一點時間才能顯示，沒有人為甚麼煩惱！
為降低字型下載速度緩慢的風險，大多數瀏覽器都會在超過時限後使用備用字型。這項功能很實用，但很抱歉，瀏覽器的實際實作方式有所不同。
| 瀏覽器 | 逾時 | 備用 | 交換 |
|---|---|---|---|
| Chrome 35 以上版本 | 3 秒 | 是 | 是 |
| Opera | 3 秒 | 是 | 是 |
| Firefox | 3 秒 | 是 | 是 |
| Internet Explorer | 0 秒 | 是 | 是 |
| Safari | 無逾時 | 不適用 | 不適用 |
- Chrome 和 Firefox 設有 3 秒的逾時時間，超過此時間就會以備用字型顯示文字。如果字型可以下載，最終會發生替換情形，並以所需字型重新轉譯文字。
- Internet Explorer 的逾時時間設為零秒，因此可立即轉譯文字。如果要求的字型尚無法使用，系統會使用備用選項，並在要求的字型有可用後重新轉譯文字。
- Safari 沒有逾時行為 (或至少沒有基準網路逾時)。
更糟的是，開發人員無法掌控這些規則對應用程式的影響。注重效能的開發人員可能會偏好使用備用字型，以便享有更快的初始體驗，等到可以下載後，再使用比較好的網頁字型。使用 Font Load API 等工具可能可以覆寫部分預設的瀏覽器行為，實現效能提升，但由於必須編寫大量 JavaScript 而必須寫入頁面或從外部檔案要求寫入，這會產生額外的 HTTP 延遲時間。
為解決這個問題，CSS 工作團隊提議使用新的 @font-face 描述元、font-display 以及對應的屬性，以控制可下載的字型在完全載入之前的算繪方式。
字型下載時間表
與部分瀏覽器現今實作的字型逾時行為類似，font-display 將字型下載的生命週期區隔為三個主要期間。
- 第一個時段是「字型區塊期間」，在這段期間，如果未載入字型，任何嘗試使用該字型的元素都必須改為使用隱形備用字型進行轉譯。如果字型在區塊期間成功載入，系統就會正常使用字型。
- 字型替換期間會在字型區塊結束後立即生效。在這段期間，如果未載入字型，任何嘗試使用該字型的元素都必須改用備用字型進行轉譯。如果字型在交換期間成功載入，字型就會正常使用。
- 字型失敗期間會在字型交換期結束後立即發生。如果這段期間開始時仍未載入該字型，系統會將該字型標示為載入失敗，造成一般字型備用。否則會正常使用字型。
瞭解這些期間後，您就能使用 font-display，根據是否要在下載或下載時間決定字型的顯示方式。
哪種字型最適合您？
如要使用 font-display 描述元，請將該描述元新增至規則的 @font-face 規則中：
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display 目前支援下列範圍的值 auto | block | swap | fallback | optional。
自動
auto 會參考使用者代理程式使用的字型顯示策略。大多數瀏覽器目前都有類似 block 的預設策略。
封鎖
block 會讓字型面臨短暫的區塊期間 (在大多數情況下，建議使用 3) 和無限交換週期。換句話說，如果未載入該字型，瀏覽器會先繪製「隱藏」文字，但在字型載入後立即切換。為此，瀏覽器會建立一個匿名字型，並顯示與所選字型類似的指標，但所有字符中都不含「墨水」。只有在需要顯示特定字體的文字才能供網頁使用時，才應使用這個值。
翻譯
swap 表示字型表面為零秒區塊，且可無限切換。也就是說，如果未載入字型錶面，瀏覽器會立即使用備用字型繪製文字，但會在載入字型後立即切換。與 block 類似，只有在網頁以特定字型顯示文字時，才可使用這個值，但以任何字型轉譯，還是能收到正確的訊息。標誌文字很適合使用「替換」，因為採用合理的備用選項顯示公司名稱，就能傳達訊息，但最終要使用官方字體。
備用
備用 可讓字型的區塊時間極小 (大多數情況下，建議不超過 100 毫秒) 和較短的交換週期 (在多數情況下，建議使用 3 秒)。換句話說，如果沒有載入字型，系統會先使用備用選項進行算繪，但字型在載入後會馬上切換。不過，如果時間過久，系統就會在網頁的生命週期使用備用選項。備用內容適用於您希望使用者盡快開始閱讀的內文，以及在載入新字型時任意轉動文字，造成乾擾體驗。
選填
「optional」可讓字型面臨極小的區塊週期 (多數情況下，建議不超過 100 毫秒)，且交換週期則為零。與備用類似，當下載字型較「有關聯」，但對體驗而言並非關鍵時，此做法會是一個不錯的選擇。optional 值會指示瀏覽器是否要啟動字型下載作業，而字型下載作業可能會選擇不執行，或是以低優先順序執行，具體取決於使用者認為最適合使用者的方式。在使用者連線訊號較弱時拉出字型，可能就不是資源的最佳運用時，這個做法就非常實用。
瀏覽器支援
font-display 目前位於 Chrome 49 電腦版的實驗性 Web Platform 功能標記後方，適用於 Android 的 Opera 和 Opera。
操作示範
請參考範例，瞭解如何為 font-display 提供鏡頭。對著重效能的開發人員來說，這項工具是更實用的工具！