網頁功能：
font-size-adjust
載入網頁字型時，通常會取代尺寸不同的備用字型，即使兩者都設為相同的 font-size 也一樣。這會導致「版面配置位移」(Cumulative Layout Shift)，如果備用字型的小寫字母 (x 高度) 與偏好字型有顯著差異，可能會導致文字難以辨識。
font-size-adjust 屬性可根據特定指標 (通常是 x 高度) 標準化字型大小，確保文字占用的視覺空間相同，無論目前使用哪種字型。
導入步驟
1. 找出偏好字型的顯示比例
如要正規化備用字型，您需要主要字型的「外觀值」(小寫字母與字型大小的比率)。
- 自動探索 (建議)：使用
from-font關鍵字，讓瀏覽器從主要網頁字型中擷取比例。 - 手動計算：如果您知道特定值 (例如 Verdana 為 0.545)，可以直接提供，以便更精確地控制。
2. 將 font-size-adjust 套用至文字容器
將屬性套用至元素或父項容器。這樣一來，如果主要字型無法載入或正在載入，備用字型就會縮放，以符合主要字型的視覺大小。
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. (選用) 調整特定指標
雖然 x 高度是預設且最常見的指標，但您也可以依其他指標進行正規化，例如 cap-height (適用於全大寫標題) 或 ch-width (適用於等寬字型)。
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. 驗證視覺穩定性
確認 font-size-adjust 值與備用廣告正確對齊。如要測試，可以暫時封鎖網頁字型，或在瀏覽器的開發人員工具中調整 font-family 宣告，確認文字版面配置是否穩定。
備用策略
在不支援 font-size-adjust 的瀏覽器中，字型會以預設比例顯示。這可能會導致版面配置在字型切換期間發生變化，或影響可讀性。
如要在不使用 font-size-adjust 的情況下緩解這個問題，您可以使用 @font-face 描述元 size-adjust、ascent-override 和 descent-override 手動調整備用字型，但這些描述元的計算方式比單一 font-size-adjust 值更複雜。