字体回退和CLS

…在核心Web虚拟版的上下文中

加载自定义字体（所有浏览器默认不知道的字体）可能会轻易在加载序列中引入一些延迟，并导致CLS (Cumulative Layout Shift)问题。 在浏览器缓存字体之前，这适用于网站上的第一个页面加载。

您可以尝试预加载和/或推送自定义字体，但始终有一次浏览器会使用默认字体呈现正文。 在慢速设备或慢速连接上尤其如此。 在加载字体之前，您可以隐藏整个字体，但FCP（第一个内容绘制）和LCP（最大内容绘制）分数将受到严重惩罚。

您还可以使用font-display: optional等CSS技巧，但可能根本无法在慢速连接上加载字体：浏览器指示在某个（短）延迟后忽略字体。

最后一种解决方案不会阻止CLS得分受到影响：在交换字体时，内容大小可能会更改，布局可能会“偏移”。

还有另一种机制可用于防止这2个问题（字体加载延迟和CLS）：使用字体回退。

字体回退的想法是缩放浏览器默认字体，以便在应用于页面的内容时，内容会占用与字体回退和自定义字体相同的“空间”。 这样，您便可以不使用版面偏移将其中一个与另一个交换。 如果您使用的默认字体与自定义字体“相似”，那么这些毫秒的首次页面加载时间将非常接近您要为自定义字体提供的体验。 然后，您可以延迟加载自定义字体，或至少使其在加载序列中无阻塞。

font-fallback扩展

我们构建了一个chrome扩展以帮助计算字体回退。

在页面上打开该扩展时，它会分析该页面上使用的字体：字体是字体系列和字体粗细的组合。 现在，您可以为每个字体选择默认浏览器字体并运行字体回退计算。 对于每个字体，扩展程序将计算默认浏览器字体中哪个size-adjustment是必需的，以便内容与两种字体具有相同的宽度。
由于高度应由line-height控制，因此计算仅针对宽度进行：您应在网站上设置line-height，以免字体决定文本的高度。 对于段落、标题、列表也是如此……

注意：使用字体套件时，会倾向于加载许多从未使用（或在网站上其他位置使用，而不是在当前页面上）的字体。 该扩展还显示加载的总数。 如果可以进行某些优化，它也是很好的指示器：通过减少字体包提供的字体来优化字体包，可以节省大量字节以传输！

完成计算工作后，可以复制计算的CSS并将其粘贴到主CSS中。

生成的字体系列必须添加到CSS font-family中的自定义字体之后：浏览器最初将找不到该自定义字体，请使用回退直至稍后加载该自定义字体。 由于它们使用相同的空间，因此交换不会生成CLS！

要微调字体调整值，还可以使用模拟面板。

选中该框后，将直接在页面中用计算的回退字体替换自定义字体。 文本输入允许您更改size-adjust值并立即可视化结果（每次更改值时都需要切换复选框）。

Edge案例

该扩展基于现有站点、现有内容和CSS规则进行计算。 在不同的上下文中，size-adjust可能并不完全适合，并且字体交换可能仍会生成CLS：

您将直接在扩展存储库中找到更多技术详细信息和其他工具： https://github.com/adobe/helix-font-fallback-extension