Web 功能：
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;
}
}