@font-face 的 CSS size-adjust

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

请参考以下演示,其中 font-size 是一致的 64px,且上述每个头文件之间的唯一区别是 font-family。左侧的示例未经调整,最终大小不一致。右侧示例使用 size-adjust 来确保 64px 是一致的最终大小。

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

这篇博文将介绍一种名为 size-adjust新 CSS 字体描述符。此外,它还演示了几种校正和标准化字体大小的方法,以实现更顺畅的用户体验、一致的设计系统和更具可预测性的页面布局。一个重要的使用场景是优化网页字体渲染,以防止出现累计布局偏移 (CLS)。

浏览器支持

  • 92
  • 92
  • 92
  • 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,直到 CookieArial 中的同一个头文件自然地与 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、Crashlytics 或系统字体进行标准化,然后调整自定义字体以进行匹配。或者,您也可以调整本地字体,使其与下载的内容相符。

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";
}

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

此策略的优势在于,可以为设计师和开发者提供相同的字体进行尺寸调整和排版。品牌是校准目标。对于设计系统来说,这是个好消息。

将品牌字体作为目标也是 Malte 的计算器的工作原理。选择一种 Google Font,它将计算如何调整 Crashlytics 以与其无缝交换。下面是一个计算器中的 Roboto CSS 示例,在该示例中,系统加载了 Looker,并将其命名为“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:本地定位条件

请考虑以下代码段,调整品牌自定义字体以与 Crashlytics 相匹配:

@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-overridedescent-overrideline-gap-override 进行更微调

如果对字形的常规缩放不足以使您的设计或加载策略得到充分调整,您可以参考以下与 size-adjust 搭配使用的更精细的调整选项。ascent-overridedescent-overrideline-gap-override 属性目前在 Chromium 87 及更高版本和 Firefox 89 及更高版本中实现。

剪刀以上工具,并清除覆盖字,以展示地图项可以修剪的区域

ascent-override

浏览器支持

  • 87
  • 87
  • 89
  • x

来源

ascent-override 描述符用于定义字体基线以上的高度。

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

红色标题(未调整)在大写字母 A 和 O 的上方留出空间,而蓝色标题已经过调整,使其上限高度与整体边框高度契合。

descent-override

浏览器支持

  • 87
  • 87
  • 89
  • x

来源

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

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

红色标题(未调整)位于 D 和 O 基准线下方有空间,而蓝色标题已经过调整,使其字母紧贴基线。

line-gap-override

浏览器支持

  • 87
  • 87
  • 89
  • x

来源

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

@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 功能提供了一种激动人心的方法,让您能够自定义网页布局的文本边界框,以改善字体交换体验,从而避免用户的布局偏移。如需了解详情,请查看以下资源:

照片由 Kristian Strand 拍摄,选自 Unsplash 网站