CSS font-size-adjust 现已纳入基准

Rachel Andrew

浏览器支持

  • 127
  • 127
  • 3
  • 16.4

来源

CSS font-size-adjust 属性现已登陆 Chrome， 并纳入 Baseline 新可用。此属性有助于防止 在加载后备字体时更改布局， 确保后备字体在较小字号下的易读性font-size-adjust 属性是 Interop 2024、 所以这是提高云服务提供商的互操作性 Web 平台。

问题

比较设置为相同大小的两种字体时，根据形状和大小 因此显示的文本所占的空间量会大相径庭。 例如，以下演示以 Verdana 和 Arial 格式显示文本， 都设为 16 像素

<ph type="x-smartling-placeholder">。
文本在 Verdana 和 Arial 中以 16 像素显示。

尺寸差异是通过宽高比、 与字体中的大写字母相比，小写字母的高度； 因字体而异。

在使用具有不同切面值的字体时，这可能会导致两个问题 作为后备首先，字体占用的空间量将会发生变化。 其次，所选择的后备字体可能不如 尤其是在字体较小时指定的值。这是因为 小写字母相对于大写字母的相对高度是 易读性

font-size-adjust如何提供帮助

通过 font-size-adjust 属性，您可以调整后备字体， 匹配第一种字体。以下示例显示了 2 个字体 这一次，调整了第二种字体，使其与第一种字体相匹配。

<ph type="x-smartling-placeholder">。
使用 font-size-adjust。

此示例使用单个值（即数字），使用 默认字体指标为 ex-height。也就是 X 高度与 将字体中的小写 x 的高度设为字体大小。你还可以指定 指标。在下一个示例中，我使用 ch-width 关键字。

<ph type="x-smartling-placeholder">。
将 font-size-adjust 与 ch-width 字体指标搭配使用。

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

有必要使用后备字体查看您的网站 调整 font-size-adjust 可以帮助使用后备字体的读者 享受更好的体验，尤其是现在，此功能已面向所有平台提供！