字型通常是載入緩慢的大型檔案。部分瀏覽器會在字型載入前隱藏文字,導致閃爍顯示的文字 (FOIT)。
Lighthouse 字型顯示稽核失敗情形
Lighthouse 會標記任何可能使用閃光燈隱藏文字的字型網址:
![Lighthouse 螢幕截圖,確保網站字型載入稽核期間,文字會保持顯示狀態](https://developer.chrome.google.cn/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=19&hl=zh-tw)
如何避免顯示隱藏的文字
font-display
API 指出在 font-face
樣式中使用字型的方式。以下 font-display
值會指示瀏覽器在自訂字型尚未準備就緒時使用系統字型:
swap
optional
fallback
CSS 範例
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google Fonts 範例
將 &display=swap
/&display=optional
/&display=fallback
參數加到 Google Fonts 網址結尾:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
如何避免延遲字型造成版面配置位移
暫時顯示系統字型,會將 FOIT 替換成無樣式文字 (FOUT) 的閃光燈。這樣做可加快內容轉譯速度,進而改善 FCP&LCP,但當自訂字型取代臨時系統字型時,FOIT 和 FOUT 也會對 CLS 產生相同的影響。
如要緩解字型載入的 CLS 影響,您可以搭配 font-display: optional
使用預先載入項目。不過,過度預先載入可能會對載入指標造成負面影響。建議您執行 A/B 測試,確保預先載入字型不會造成任何效能迴歸。
堆疊專屬指南
Drupal
在主題中定義自訂字型時,指定 @font-display
。
Magento
在定義自訂字型時指定 @font-display
。