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

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 Loading 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. 按一下「產生報表」按鈕。

確認已設定「確保文字在網頁字型載入期間持續顯示」稽核。