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

自 Chrome 第 83 版起，你可以合併選用 link 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 團隊有意透過這些新的最佳化功能，瞭解您預先載入選用字型的經驗！如果您遇到任何問題或想要捨棄任何功能建議，請提報問題。