字型遞補和CLS

…在核心Web Vitals的內容中

載入自訂字型（並非所有瀏覽器預設都知道的字型）很容易在載入順序中造成一些延遲，以及CLS (Cumulative Layout Shift)問題。 在瀏覽器快取字型之前，這適用於網站上的第一個頁面載入。

您可以嘗試預先載入和/或推送自訂字型，但瀏覽器永遠會有以預設字型呈現內文的時間。 在速度緩慢的裝置或連線速度緩慢的裝置上尤其如此。 您可以隱藏整個內文，直到載入字型為止，但接著FCP （第一個內容繪製）和LCP （最大內容繪製）分數將會受到高度懲罰。

您也可以使用font-display: optional等CSS技巧，但字型可能完全無法在慢速連線中載入：瀏覽器會指示在特定（短）延遲後忽略它。

這個最後的解決方案不會防止CLS分數受到影響：當調換字型時，內容大小可能會變更，而且版面可能會發生「位移」。

還有另一種機制可用來防止這2個問題（字型載入延遲和CLS）：使用字型遞補。

字型遞補的構想是縮放瀏覽器預設字型，以便在套用至頁面內容時，內容會佔用字型遞補和自訂字型相同的「空間」。 就像這樣，您可以不使用版面配置位移來切換一個專案。 如果您使用的預設字型看起來與自訂字型「相似」，那麼這些首次頁面載入的毫秒數看起來會非常接近您要提供自訂字型的體驗。 然後，您可以延遲自訂字型載入，或至少使其在載入序列中無阻塞。

font-fallback擴充功能

我們已建置Chrome擴充功能，協助運算字型遞補。

當您開啟頁面上的擴充功能時，它會分析該頁面上使用的字型：字型是字型系列和字型粗細的組合。 現在，您可以選取預設的瀏覽器字型，並執行字型遞補計算。 對於每個字型，擴充功能會計算預設瀏覽器字型的哪一種size-adjustment是必要的，以便內容與兩種字型的寬度相同。
由於高度應由line-height控制，因此計算僅會在寬度上進行：您應在網站上設定line-height，以免字型決定文字的高度。 段落、標題、清單都是如此……

注意：使用字型套件時，會傾向於載入許多從未使用過的字型（或在網站上其他位置使用，而不是在目前頁面上）。 此擴充功能也會顯示總共載入的數量。 如果可以進行某些最佳化，這也是很好的指標：透過減少字型套件提供的字型面孔來最佳化字型套件，可以儲存大量位元組以進行傳輸！

完成計算工作後，您可以複製計算的CSS並將其貼到您的主要CSS中。

產生的字型系列必須新增至CSS font-family中的自訂字型之後：瀏覽器一開始會找不到自訂字型，請使用遞補字型，直到稍後載入自訂字型為止。 由於它們使用相同的空間，交換不會產生CLS！

若要微調字型調整值，您也可以使用模擬面板。

核取方塊會直接在頁面中用計算的後援字型取代自訂字型。 文字輸入可讓您變更size-adjust值，並立即將結果視覺化（每次您變更值時，都必須切換核取方塊）。

Edge案例

擴充功能會根據現有網站、現有內容和CSS規則進行計算。 在不同的內容中，size-adjust可能並不完全符合，而且字型交換可能仍會產生CLS：

您可以直接在擴充功能存放庫中找到更多技術詳細資料和其他工具： https://github.com/adobe/helix-font-fallback-extension