@font-face 的 CSS size-adjust

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

Adam Argyle

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

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

本文将探讨一个名为 size-adjust 的新 CSS 字体描述符。还演示了几种更正和标准化字体大小的方法 打造更流畅的用户体验、采用一致的设计系统，且可预测性更强 页面布局。优化网页字体渲染的一个重要应用场景是 累积布局偏移 (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 动画中，观看左侧的示例，以及更改字体后出现的变化。这只是一个包含一个标题的小例子 而且问题非常明显

左侧示例中发生了布局偏移，右侧示例则没有。

要改进字体渲染，一个很好的技术是字体 交换。呈现快速加载的 系统字体先显示内容，然后在出现以下情况时将其替换为网页字体： 网页字体加载完毕这样，您既能让内容尽快显示，又能获得样式出色的网页，而无需让用户等待太久。不过，问题在于 网页字体加载时，它会移动整个网页，因为它是以 方框高度大小略有不同

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

在 @font-face 规则中添加 size-adjust 后，它会设置全局字形 调整字体把握好时机会削弱视觉吸引力 无缝切换。如需实现流畅的切换，请手动调整，或试用 Malte Ubl 制作的尺寸调整计算器。

选择 Google 网页字体，获取预调整的 @font-face 代码段。

在这篇博文的开头，我们通过试验和调整来修正字体大小问题， 错误。已在源代码中推送 size-adjust，直到在同一头文件中 Cookie 和 Arial 渲染的 64px 与 Press Start 2P 自然地渲染的相同。 我将两个字体对齐到目标字体大小。

@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 字体，系统会计算如何调整 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 进行微调

如果通用的字形缩放不足以适应您的设计或加载 下面列举了一些可与 Responsible AI 搭配使用的 size-adjust。通过 ascent-override, descent-override, 和 line-gap-override 属性目前在 Chromium 87+ 和 Firefox 89+ 中实现。

上面有一把剪刀，并吹出替换词 地图项可剪辑到

ascent-override

浏览器支持

  • Chrome：87。
  • Edge：87。
  • Firefox：89。
  • Safari：不受支持。

来源

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：不支持。

来源

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：不支持。

来源

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 功能是一种很棒的方法，用于自定义 文本边界框，以改善字体交换体验 从而避免用户的布局偏移。如需了解详情，请查看这些 资源：

照片由 Kristian Strand 拍摄于 Unstone