@font-face 的 CSS size-adjust

现在，在加载网页字体时，您可以调整其缩放比例，以标准化文档字体大小，并防止在切换字体时发生布局偏移

Adam Argyle

请考虑以下演示，其中 font-size 是一致的 64px，这些标头之间的唯一区别是 font-family。左侧的示例未经调整，最终尺寸不一致。右侧的示例使用 size-adjust 来确保 64px 具有一致的最终大小。

在此示例中，Chrome 开发者工具 CSS 网格布局调试工具用于显示高度。

本文将探讨一个新的 CSS 字体描述符，名为 size-adjust。此外，还演示了几种更正和标准化字体大小的方法，以提供更流畅的用户体验、一致的设计体系和更可预测的页面布局。一个重要的用例是优化网页字体渲染，以防止累积布局偏移 (CLS)。

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

以下是问题空间的交互式演示。尝试使用下拉菜单更改字体，并观察：

  1. 结果中的高度差异。
  2. 内容发生视觉上不协调的偏移。
  3. 移动互动式目标区域（下拉菜单会跳来跳去！）。

如何使用 size-adjust 缩放字体

语法简介：

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. 创建名为 Adjusted Typeface 的自定义字体。
  2. 使用 size-adjust 将每个字形放大到其默认大小的 150%。
  3. 仅影响单个导入的字体。

按如下方式使用上述自定义字体：

h1 {
  font-family: "Adjusted Typeface";
}

通过无缝字体切换缓解 CLS 问题

在以下 GIF 中，请观察左侧的示例，以及更改字体时发生的偏移。这只是一个包含单个标题元素的小示例，问题非常明显。

左侧示例存在布局偏移，右侧示例不存在。

为了改进字体渲染，一种很好的方法是字体交换。先呈现加载速度快的系统字体以显示内容，然后在网页字体加载完毕后将其替换为网页字体。这样您就可以两全其美：内容会尽快显示，并且您会获得一个样式美观的网页，而不会牺牲用户访问内容的时间。不过，问题在于，有时当网页字体加载时，它会移动整个网页，因为它呈现的框高度大小略有不同。

内容越多，字体切换时可能发生的布局偏移就越多

通过将 size-adjust 放入 @font-face 规则中，可以为字体设置全局字形调整。如果时机把握得当，视觉变化会非常小，实现无缝切换。如需实现无缝切换，请手动调整或尝试使用 Malte Ubl 提供的尺寸调整计算器。

选择 Google Web Font，获取预先调整的 @font-face 代码段。

在本文开头，我们通过反复试验解决了字体大小问题。在源代码中对 size-adjust 进行了微调，直到 Cookie 和 Arial 中的同一标题呈现出与 Press Start 2P 自然呈现的相同 64px。 我将两种字体调整为目标字体大小。

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

正在校准字体

作为作者，您需要确定用于标准化字体缩放比例的校准目标。您可以将字体标准化为 Times、Arial 或系统字体，然后调整自定义字体以使其匹配。或者，您也可以调整本地字体，使其与您下载的字体相匹配。

size-adjust 校准策略：

  1. 远程目标：
    根据下载的字体调整本地字体。
  2. 本地目标：
    根据本地目标字体调整下载的字体。

示例 1：远程目标

请考虑以下代码段，该代码段会调整本地可用字体的大小，使其与远程 src 自定义字体的大小相匹配。远程自定义字体是校准的目标， 可能是品牌字体：

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

在此示例中，本地字体 Arial 会根据加载的自定义字体进行调整，以实现无缝切换。

这种策略的优势在于，可为设计人员和开发者提供相同的字体，以便进行大小调整和排版。品牌是校准目标。这对设计体系来说是个好消息。

Malte 的计算器也是以品牌字体为目标。 选择一种 Google Fonts，它会计算如何调整 Arial 以便与其无缝切换。以下是计算器中的 Roboto CSS 示例，其中加载了 Arial 并将其命名为“Roboto-fallback”：

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

如需创建完全跨平台的调整，请参阅以下示例，该示例提供了 2 个调整后的本地后备字体，以备品牌字体无法使用时使用。

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

示例 2：本地定位

请考虑以下代码段，该代码段会调整品牌自定义字体以匹配 Arial：

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

此策略的优势在于，无需任何调整即可进行渲染，然后调整任何传入的字体以进行匹配。

使用 ascent-override、descent-override 和 line-gap-override 进行更精细的调整

如果字形的通用缩放不足以满足您的设计或加载策略，您可以结合使用 size-adjust 和以下一些更精细的调整选项。ascent-override、descent-override 和 line-gap-override 属性目前在 Chromium 87+ 和 Firefox 89+ 中实现。

“overrides”一词上方和下方的剪刀，展示了这些功能可以剪裁的区域

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

ascent-override 描述符定义了字体基线上方的高度。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

红色标题（未调整）的大写字母 A 和 O 上方有空间，而蓝色标题已调整，因此其大写字母高度与整体边界框紧密贴合。

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

descent-override 描述符定义了字体基线以下的高度。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

红色标题（未调整）的 D 和 O 基线下方有空间，而蓝色标题经过调整，其字母紧贴基线。

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

line-gap-override 描述符用于定义字体的行距指标。这是字体推荐的行间距或外部行距。

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

红色标题（未调整）没有 line-gap-override，基本上是 0%，而蓝色标题已向上调整 50%，从而在字母上方和下方留出相应空间。

综合应用

这些替换项中的每一项都提供了另一种方法，可从网页的安全文本边界框中剪裁多余内容。您可以调整文本框，以实现精准呈现。

总结

@font-face size-adjust CSS 功能是一种令人兴奋的方式，可用于自定义网页布局的文本边界框，从而改善字体切换体验，避免用户遇到布局偏移。如需了解详情，请参阅以下资源：