確保載入網站字型時文字會持續顯示

字型通常是大型檔案，載入時間較慢。部分瀏覽器會先隱藏文字，直到字型載入為止。 會導致隱藏的文字 (FOIT) 閃爍。

Lighthouse 字體顯示稽核失敗的原因

Lighthouse 會標示任何可能閃爍顯示不可見文字的字型網址：

Lighthouse 的螢幕截圖確保網站字型載入稽核期間，文字仍清晰可見
。

如何避免顯示隱藏的文字

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 字型範例

將 &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 的影響都相同。

您可以搭配 font-display: optional 使用預先載入功能，藉此降低字型載入作業對 CLS 的影響。不過，過度使用預先載入機制可能會對載入指標造成負面影響。建議您執行 A/B 測試，確保預先載入字型不會帶來任何效果 以免發生效能迴歸問題

堆疊專屬指南

Drupal

在主題中定義自訂字型時，指定 @font-display。

Magento

在定義自訂字型時指定 @font-display。

資源