預先載入選用字型，避免版面配置位移和閃爍未顯示的文字 (FOIT)

從 Chrome 83 開始，您可以結合連結 rel="preload" 和 font-display: optional，徹底移除版面配置卡頓

Houssein Djirdeh

Chrome 83 最佳化了算繪週期，因此預先載入選用字型時不會發生版面配置位移。 結合 <link rel="preload"> 和 font-display: optional 是確保在算繪自訂字型時不會發生版面配置卡頓的最佳方式。

瀏覽器相容性

如要查看最新的跨瀏覽器支援資訊，請參閱 MDN 的資料：

• <link rel="preload">
• font-display

字型顯示

版面配置位移或重新配置是指網頁上的資源動態變更，導致內容「位移」。擷取及算繪網路字型可能會直接導致版面配置位移，原因有兩種：

• 備用字型會替換成新字型 (「未設定樣式的文字閃爍」)
• 在網頁算繪新字型前，會顯示「隱形」文字 (「隱形文字閃爍」)

CSS font-display 屬性提供多種支援的值 (auto、block、swap、fallback 和 optional)，可修改自訂字型的轉譯行為。選擇要使用的值取決於非同步載入字型的偏好行為。不過，直到現在，上述每個支援的值都會以其中一種方式觸發重新配置！

選用字型

font-display 屬性會使用三個時期的時間軸，處理需要先下載才能轉譯的字型：

• 封鎖：算繪「隱形」文字，但一完成載入作業，就會切換為網路字型。
• 切換：使用備用系統字型算繪文字，但網頁字型載入完成後，立即切換為網頁字型。
• 失敗：使用備用系統字型算繪文字。

先前以 font-display: optional 指定的字型有 100 毫秒的封鎖期，且沒有交換期。也就是說，「隱形」文字會在切換為備用字型前短暫顯示。如果字型未在 100 毫秒內下載，系統就會使用備用字型，且不會發生交換。

會發生以下情況：

不過，如果字型在 100 毫秒封鎖期結束前下載完畢，網頁就會顯示並使用自訂字型。

無論是否使用備用字型，或自訂字型是否及時完成載入，Chrome 在這兩種情況下都會重新算繪網頁兩次。這會導致不可見文字輕微閃爍，如果系統算繪新字型，還會發生版面配置卡頓，導致部分網頁內容移動。即使字型儲存在瀏覽器的磁碟快取中，且在封鎖期結束前就能順利載入，也會發生這種情況。

Chrome 83 已推出最佳化功能，可完全移除以 <link rel="preload'> 預先載入的選用字型首次算繪週期。而是會封鎖算繪作業，直到自訂字型載入完成或經過一段時間為止。這個逾時期限目前設為 100 毫秒，但為提升效能，近期可能會有所變動。

在 Chrome 中預先載入選用字型，可避免版面配置抖動和未設定樣式的文字閃爍。這符合 CSS 字型模組第 4 級中指定的必要行為，也就是選用字型絕不應導致重新排版，使用者代理程式則可延遲算繪一段適當的時間。

雖然不必預先載入選用字型，但這樣做可大幅提高字型在第一次算繪週期前載入的機率，尤其是在瀏覽器的快取中尚未儲存字型時。

結論

Chrome 團隊很想瞭解您使用這些新最佳化功能預先載入選用字型的體驗！如果遇到任何問題或想提出功能建議，請回報問題。