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

浏览器支持

  • 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 可以帮助使用后备字体的读者 享受更好的体验,尤其是现在,此功能已面向所有平台提供!