網頁功能：
font-size-adjust
混合使用不同字型系列時 (例如插入內嵌程式碼片段，或切換不同主題的字型系列)，「x 高度」(小寫字母的高度) 的差異可能會導致某個字型看起來比另一個字型小或大得多。這可能會導致可讀性不佳和版面配置偏移。
font-size-adjust 屬性可讓你根據特定字型指標 (通常是 x 高度) 調整字型大小，藉此正規化文字的視覺大小。
導入步驟
- 必要：請將
font-size-adjust套用至字型一致性至關重要的元素，例如使用網頁字型的容器，或混合字型系列的區塊。 - 必要：在元素上使用
from-font關鍵字，自動將巢狀元素中的字型大小與主要字型比例進行比對。 - 必要：如果基準字型比例來自不同主題，請為
font-size-adjust使用特定的數值顯示比例覆寫值 (例如font-size-adjust: 0.5)，以便單獨正規化比例。
範例：自動正規化 x 高度
使用 from-font 是最可靠的做法。從第一個可用字型擷取 x 高度的顯示比例，並套用至子項元素的字型。
.content-area {
font-family: "MyCustomWebFont";
/* Automatically extract and apply x-height ratio from MyCustomWebFont */
font-size-adjust: from-font;
}
.content-area span{
font-family: "MyOtherCustomWebFont"
}
範例：指定特定 x 高度
如果要調整的字型不是基準字型的子項，請指定調整 x 高度的值。
.theme{
font-family: Verdana, sans-serif;
}
.theme.alternate{
font-family: Times;
/* Set to the aspect ratio (x-height / font-size) of the primary font */
font-size-adjust: 0.51;
}
備用策略
強制：在不支援 font-size-adjust 的瀏覽器中，字型會以其自然 font-size 值算繪。您必須使用 @supports 區塊，為不支援的瀏覽器提供有效的備用策略，以減輕這個問題：
- 使用
@supports not (font-size-adjust: from-font)偵測font-size-adjust支援，並提供備用樣式 (例如調整行高或字型大小)。 - 選擇與主要字型 x 高度相似的字型。
- 為替代和巢狀字型系列套用特定的
font-size和line-height覆寫值。
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
.content-area {
/* Manual adjustment for browsers without support (if needed) */
line-height: 1.6;
font-size: 1.2rem;
}
}