CSS size-adjust for @font-face

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

Adam Argyle

请看以下演示，其中 font-size 始终为 64px，而这些标题之间唯一的区别是 font-family。左侧的示例未经调整，最终大小不一致。右侧的示例使用 size-adjust 来确保 64px 是最终一致的大小。

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

这篇文章探讨了一个名为 size-adjust 的新 CSS font-face 描述符。它还演示了几种纠正和标准化字体大小的方法，以获得更流畅的用户体验、一致的设计系统和更可预测的页面布局。一个重要的用例是优化 Web 字体渲染以防止累积布局偏移 (CLS)。

浏览器支持

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

来源

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

  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 中，观看左侧的示例，以及字体更改时如何发生偏移。这只是一个带有单个标题元素的小例子，但问题非常明显。

左侧的示例有布局偏移，右侧的示例没有。

为了改进字体渲染，一个很好的技术是字体交换。首先渲染一个快速加载的系统字体以显示内容，然后在 Web 字体加载完成后将其与 Web 字体交换。这为您提供了两全其美的方案：内容尽快可见，并且您可以在不牺牲用户内容加载时间的情况下获得样式精美的页面。然而，问题是，有时当 Web 字体加载时，它会使整个页面发生偏移，因为它以略微不同的框高度大小呈现。

内容越多，字体交换时潜在的布局偏移就越大

通过将 size-adjust 放入 @font-face 规则中，它为字体设置全局字形调整。正确地把握时机将导致最小的视觉变化，实现无缝交换。要创建无缝交换，请手动调整或尝试 size-adjust 计算器，作者是 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 正在调整，以 anticipation 预期加载自定义字体，实现无缝交换。

此策略的优势在于为设计师和开发人员提供相同的字体用于调整大小和排版。品牌是校准目标。这对设计系统来说是个好消息。

以品牌字体作为目标也是 Malte 的计算器的工作原理。选择一个 Google Font，它将计算如何调整 Arial 以实现与之无缝交换。这是一个来自计算器的 Roboto CSS 示例，其中 Arial 已加载并命名为“Roboto-fallback”

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

要创建完全跨平台的调整，请参阅以下示例，该示例提供了 2 种调整后的本地后备字体，以 anticipation 预期品牌字体。

@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+ 中实现。

scissors above and blow the word overrides, demonstrating the areas the features can trim to

ascent-override

浏览器支持

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

来源

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

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

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

descent-override

浏览器支持

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

来源

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

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

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

line-gap-override

浏览器支持

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

来源

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

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

红色标题（未调整）没有 line-gap-override，基本上它处于 0%，而蓝色标题已向上调整了 50%，从而在字母上方和下方相应地创建了空间。

总结

这些覆盖属性中的每一个都提供了一种从 Web 的安全文本边界框中修剪多余部分的其他方法。您可以定制文本框以实现精确的演示。

结论

@font-face size-adjust CSS 功能是一种令人兴奋的方式，可以自定义 Web 布局的文本边界框，以改善字体交换体验，从而避免用户的布局偏移。要了解更多信息，请查看以下资源

Kristian Strand 在 Unsplash 上拍摄的照片