避免在載入字型時隱藏文字

Katie Hempenius

Barry Pollard

為何要關注這項議題？

字型通常是載入時間的大型檔案，為了處理這個問題，部分瀏覽器會隱藏文字，直到字型載入為止 (「隱藏文字閃爍」)。

最大內容繪製 (LCP) 作業可能會延遲顯示文字。如果您打算最佳化效能，就應該避免使用「閃爍的文字」(FOIT)，並立即使用系統字型顯示內容，這樣會產生「無樣式文字的閃光」(FOUT)。

顯示字型的瀏覽器預設值

以下是常見瀏覽器的預設字型載入行為：

立即顯示文字

本指南說明盡快顯示文字的兩種方法：第一種方法簡單，而且具備良好的瀏覽器支援。第二種方法有深入探討，但可能會提供更多選擇。請根據需求選擇最適合的網站。

方法 #1：使用 font-display

font-display 是用於指定字型顯示策略的 API。swap 會告知瀏覽器應使用系統字型立即顯示使用這個字型的文字。自訂字型準備就緒後，系統字型就會替換。

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

如果瀏覽器不支援 font-display (但所有新型瀏覽器都支援)，瀏覽器仍會遵循載入字型的預設行為。

選項 2：等到自訂字型載入完畢後

只要多花些心思，就能從更多自訂方法著手。

這個方法分為三個部分：

• 請勿在初始載入網頁時使用自訂字型，只要重構 CSS，不一開始就使用自訂字型。這可確保瀏覽器立即使用系統字型顯示文字。
• 使用 CSS Font 載入 API 偵測自訂字型載入時間
• 更新頁面樣式即可使用自訂字型。

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

您也可以透過 FontFaceObserver 程式庫完成此操作，有些找到更簡單的 API。

因此，載入字型時，請考量許多其他因素。舉例來說，所有字型都可以一次載入，避免系統載入每個字型時出現多個版面配置。或者，網站將無法載入連線速度較慢的使用者，或使用儲存資料選項的使用者載入字型。

驗證

執行 Lighthouse 以驗證網站使用 font-display: swap 顯示文字：

1. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
2. 按一下「Lighthouse」分頁標籤。
3. 確認您已在「類別」清單中勾選「成效」核取方塊。
4. 按一下「產生報表」按鈕。

確認通過「確保網站字型載入期間持續顯示文字」稽核程序。