從 Chrome 83 開始，可以結合 link rel="preload" 和 font-display: optional，完全移除版面配置卡頓
Chrome 83 最佳化轉譯週期，預先載入選用字型時不會發生版面配置位移。
結合 <link rel="preload"> 和 font-display: optional 是最有效的方法，可確保在轉譯自訂字型時不會出現版面配置卡頓。
瀏覽器相容性
請參閱 MDN 的資料，瞭解最新的跨瀏覽器支援資訊：
字型轉譯
當網頁上的資源動態變更，導致內容「移位」時，就會發生版面配置移位或重新配置。擷取及轉譯網頁字型可能會直接導致版面配置位移，原因有兩種：
- 備用字型會替換成新字型 (「未套用樣式的文字閃爍」)
- 在網頁中顯示新字型之前，會先顯示「隱形」文字 (「隱形文字閃爍」)
CSS font-display 屬性提供多種支援的值 (auto、block、swap、fallback 和 optional)，可用於修改自訂字型的算繪行為。選擇要使用的值時，請考量非同步載入字型的偏好行為。不過，在過去，上述每個支援的值都會透過上述兩種方式之一觸發重新版面配置！
選用字型
font-display 屬性會使用三個時段的時間軸，處理需要先下載才能算繪的字型：
- Block：顯示「隱形」文字，但載入完成後立即切換為網頁字型。
- Swap：使用備用系統字型算繪文字，但網頁字型載入完成後，立即切換至網頁字型。
- 失敗：使用備用系統字型算繪文字。
先前，指定 font-display: optional 的字型有 100 毫秒的封鎖期，沒有交換期。這表示「隱形」文字會短暫顯示，然後切換至備用字型。如果字型未在 100 毫秒內下載，系統會使用備用字型，且不會進行切換。
font-display: optional 行為不過，如果字型在 100 毫秒的封鎖期結束前下載完成，系統就會在網頁上算繪並使用自訂字型。
font-display: optional 行為：在 100 毫秒封鎖期「之前」下載字型無論是否使用備用字型，或自訂字型是否及時載入完成，Chrome 都會在這兩種情況下重新轉譯網頁兩次。這會導致隱形文字稍微閃爍，且在算繪新字型時，版面配置會出現卡頓，導致部分網頁內容移動。即使字型儲存在瀏覽器的磁碟快取中，且可在封鎖期結束前順利載入，也會發生這種情況。
Chrome 83 推出最佳化功能，可完全移除使用 <link rel="preload'> 預先載入的選用字型的第一個算繪週期。而是會等到自訂字型載入完成或經過一段時間後，才會開始算繪。這個逾時期限目前設為 100 毫秒，但近期內可能會變更，以達到最佳效能。
font-display: optional 行為：預先載入字型，且字型在 100 毫秒封鎖期「之後」下載 (不會閃爍隱形文字)
font-display: optional 行為：預先載入字型，且字型在 100 毫秒封鎖期「之前」下載 (不會閃爍隱形文字)在 Chrome 中預先載入選用字型，可避免版面配置不流暢和未套用樣式的文字閃爍。這符合 CSS Fonts Module Level 4 中指定的必要行為，其中選用字型不應導致重新版面配置，而使用者代理程式可以延遲算繪一段適當的時間。
雖然不一定要預先載入選用字型，但這樣做可大幅提高在第一個算繪週期前載入的機率，尤其是尚未儲存在瀏覽器快取中的字型。
結論
Chrome 團隊很想瞭解您在採用這些新最佳化功能後，預先載入選用字型的體驗！如果遇到任何問題，或想提出功能建議，請回報問題。