现在,加载网页字体时,您可以调整其缩放比例,以便将文档字体大小标准化,并防止在切换字体时布局偏移
请考虑以下演示,其中 font-size
是一致的 64px
,并且这些标头之间的唯一区别是 font-family
。左侧的示例未经过调整,最终大小不一致。右侧的示例使用 size-adjust
来确保 64px
的最终大小保持一致。
本文将探讨一个名为 size-adjust
的新 CSS 字体描述符。还演示了几种更正和标准化字体大小的方法
打造更流畅的用户体验、采用一致的设计系统,且可预测性更强
页面布局。优化网页字体渲染的一个重要应用场景是
累积布局偏移 (CLS):
这是一个关于 问题空间。尝试使用下拉菜单更改字体,并观察以下情况:
- 结果中的高度差异。
- 视觉上令人不适的内容切换。
- 移动交互式目标区域(下拉菜单会跳来跳去!)。
如何使用 size-adjust
缩放字体
语法简介:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
- 创建一个名为
Adjusted Typeface
的自定义字体。 - 使用
size-adjust
将每个字形放大到其默认大小的 150%。 - 仅影响导入的单个字体。
请使用上述自定义字体,如下所示:
h1 {
font-family: "Adjusted Typeface";
}
通过无缝字体交换降低 CLS
在以下 GIF 动画中,观看左侧的示例,以及更改字体后出现的变化。这只是一个包含一个标题的小例子 而且问题非常明显
要改进字体渲染,一个很好的技术是字体 交换。呈现快速加载的 系统字体先显示内容,然后在出现以下情况时将其替换为网页字体: 网页字体加载完毕这样,您既能让内容尽快显示,又能获得样式出色的网页,而无需让用户等待太久。不过,问题在于 网页字体加载时,它会移动整个网页,因为它是以 方框高度大小略有不同
在 @font-face
规则中添加 size-adjust
后,它会设置全局字形
调整字体把握好时机会削弱视觉吸引力
无缝切换。如需实现流畅的切换,请手动调整,或试用 Malte Ubl 制作的尺寸调整计算器。
在这篇博文的开头,我们通过试验和调整来修正字体大小问题,
错误。已在源代码中推送 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:远程目标
请考虑以下代码段,它会调整本地可用的字体,使其大小与远程 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
ascent-override
描述符定义了高于基线的高度
字体。
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
红色标题(未调整)的大写字母 A 和 O 上方有空格,而 蓝色标题已调整,其上限是 高度与整体身体 边界框任务
descent-override
descent-override
描述符定义了字体基准线以下的高度。
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
红色标题(未调整)的 D 和 O 基准线下方有空白,而蓝色标题已经过调整,因此字母紧贴基准线。
line-gap-override
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 功能是一种很棒的方法,用于自定义
文本边界框,以改善字体交换体验
从而避免用户的布局偏移。如需了解详情,请查看这些
资源:
- CSS 字体级别 5 规格
- MDN 上的尺寸调整
- 无缝切换 @font-face 生成器
- web.dev 上的 Cumulative Layout Shift (CLS)
- 减少字体加载影响的新方法:CSS 字体描述符
照片由 Kristian Strand 拍摄于 Unstone