CSS font-display 五種策略（auto/block/swap/fallback/optional）

此文章是 FrontendMaster 上的 Advanced Web Development Quiz 課程筆記

問題

Connect the font strategies to their definition
Match the answers to the correct options.

[1] font-display: block
[2] font-display: swap
[3] font-display: fallback
[4] font-display: optional
[5] font-display: auto

[a] temporarily renders an invisible font until the custom font has been downloaded
[b] use a fallback font while the custom font is downloading, switch to the custom font when available
[c] only use the custom font if it's available, and use a fallback font if the custom font is not available
[d] allows the browser to determine the most appropriate behavior for font loading
[e] use the custom font if it's available, use a fallback font if the custom font is not available

font-display

來告訴瀏覽器在字型下載期間，文字該如何顯示與何時切換字型

共有五個可用值：

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

auto

由瀏覽器根據網路狀況和裝置決定最適合的字體載入策略

block

如果字體載入時間很長，則最少會有約 3 秒的隱形字體期間（FOIT），之後使用 fallback font，但會持續等待並在自訂字體載入後切換

當寧願延遲顯示也不願顯示錯誤的字體就可以使用這個值，但可能會影響使用者體驗和效能指標

swap

幾乎沒有隱形期間，立即顯示 fallback font，自訂字體載入後立即切換，有無限的 swap period

可以讓文字立即可讀，但仍想使用自訂字體的情況

fallback

極短的隱形期間，然後使用 fallback font，但只有短暫的 swap period（約 3 秒），超過時間就不再切換

介於 swap 和 optional 之間，想給字體載入機會但不想無限等待

optional

極短的隱形期間，如果自訂字體不是立即可用就持續使用 fallback font，完全沒有 swap period

追求最佳 LCP（Largest Contentful Paint）和零 CLS（Cumulative Layout Shift）的網站，首次造訪可能看不到自訂字體（但會快取供下次使用）

不論最後使用了哪種策略，都可以調整 fallback font 的行高、glyph 之類的設定，使其接近自訂字體的樣式，減少版面位移（CLS）

答案

[1] font-display: block
[a] temporarily renders an invisible font until the custom font has been downloaded

[2] font-display: swap
[e] use the custom font if it's available, use a fallback font if the custom font is not available

[3] font-display: fallback
[b] use a fallback font while the custom font is downloading, switch to the custom font when available

[4] font-display: optional
[c] only use the custom font if it's available, and use a fallback font if the custom font is not available

[5] font-display: auto
[d] allows the browser to determine the most appropriate behavior for font loading

參考

• font-display "MDN"