CSS font-size-Adjust 現已採用基準

Rachel Andrew

發布日期：2024 年 7 月 23 日

CSS font-size-adjust 屬性已於今日在 Chrome 推出，並成為新版基準的一部分。這項屬性可在載入備用字型時，避免版面配置產生位移，並確保備用字型在較小的字型大小下仍可讀。font-size-adjust 屬性是 Interop 2024 的一部分，因此這是另一項改善網路平台互通性的努力。

問題

比較兩個設為相同大小的字型時，顯示的文字可能會占用非常不同的空間，這取決於字形的形狀和大小。舉例來說，下列示範會顯示 Verdana 和 Arial 的文字，兩者都設為 16 像素。

Verdana 和 Arial 的 16 點文字顯示效果。

大小差異的原因在於比例值 (字型中小寫字母與大寫字母的高度) 因字型而異。

當使用不同顯示比例值的字型做為備用字型時，可能會導致兩個問題。首先，字型占用的空間量會改變。其次，您選擇的備用字體可能不如先前指定的字體易讀，特別是在小字體大小的情況下。這是因為小寫字母相對於大寫字母的相對高度，是可讀性的關鍵因素。

font-size-adjust 的協助方式

font-size-adjust 屬性可讓您調整備用字型，以便更符合第一個字型。以下範例顯示先前顯示的兩個字型，這次第二個字型已調整為與第一個字型相符。

使用 font-size-adjust。

這個範例使用單一值 (數字)，藉此使用 ex-height 的預設字型指標調整字型。這是 x 高度的比例，即字型中小寫 x 的高度與字型大小的比例。您也可以指定所使用的字型指標。在下一個範例中，除了數字外，我還使用 ch-width 關鍵字將字型標準化。

使用 font-size-adjust 和 ch-width 字型指標。

如要查看所有可能的值，請參閱 font-size-adjust 的 MSDN 說明文件。

建議您查看使用預設字型的網站，看看是否能透過 font-size-adjust 稍微調整，讓使用預設字型的讀者獲得更好的體驗，尤其是現在這項功能已全面開放！