CSS 字体大小调整现已纳入基线

Rachel Andrew

发布时间：2024 年 7 月 23 日

CSS font-size-adjust 属性今天在 Chrome 中发布，并成为新近推出的基线的一部分。此属性可以帮助防止在加载后备字体时布局发生偏移，并确保后备字体在较小字体大小下的易读性。font-size-adjust 属性是 Interop 2024 的一部分，因此这是为改进 Web 平台的互操作性所做的又一次胜利。

问题

当您比较设置为相同大小的两种字体时，根据字形的形状和大小，显示的文本可能会占用非常不同的空间。例如，以下演示显示了 Verdana 和 Arial 字体中的文本，两者都设置为 16 像素。

以 16 像素显示的 Verdana 和 Arial 字体文本。

大小差异的原因是纵横比值（即字体中小写字母相对于大写字母的高度）在不同字体之间有所不同。

当纵横比值不同的字体用作后备字体时，这可能会导致两个问题。首先，字体占用的空间量会发生变化。其次，您选择的后备字体可能不如第一个指定的字体易读，尤其是在小字体尺寸下。这是因为小写字母相对于大写字母的相对高度是易读性的关键因素。

font-size-adjust 如何提供帮助

font-size-adjust 属性允许您调整后备字体，使其更好地匹配第一个字体。以下示例显示了之前显示的两种字体，这次已调整第二个字体以匹配第一个字体。

使用 font-size-adjust。

此示例使用单个值（数字），该值使用 ex-height 的默认字体度量调整字体。这是 x 轴高度（字体中小写字母 x 的高度）与字体大小的比率。您还可以指定使用的字体度量。在下一个示例中，除了数字之外，我还使用 ch-width 关键字对字体进行了标准化。

将 font-size-adjust 与 ch-width 字体度量结合使用。

要查看所有可能的值，请参阅 font-size-adjust 的 MDN 文档。

值得使用您的后备字体查看您的网站，看看对 font-size-adjust 进行一些调整是否可以帮助使用后备字体的读者获得更好的体验，尤其是在现在它已在任何地方可用时！