视觉稳定的后备字体

加载 Web 字体时，它们通常会替换尺寸不同的后备字体，即使两者都设置为相同的 font-size 也是如此。这会导致“布局偏移”（Cumulative Layout Shift），并且如果后备字体的小写字母（x 高度）与首选字体明显不同，可能会导致文本难以辨认。

font-size-adjust 属性通过根据特定指标（通常是 x 高度）对字体大小进行标准化来解决此问题，从而确保无论当前使用的是哪种字体，文本都占据相同的视觉空间。

实现步骤

1. 确定首选字体的宽高比

如需对后备字体进行标准化，您需要知道主要字体的“宽高比值”（小写字母与字号的比率）。

自动发现（推荐）：使用 from-font 关键字，让浏览器从主要网页字体中提取比例。
手动计算：如果您知道具体值（例如 Verdana 的值为 0.545），可以直接提供该值，以便更精确地控制。

2. 将 font-size-adjust 应用于文本容器

将该属性应用于元素或父级容器。这样可以确保在主字体加载失败或正在加载时，后备字体会缩放到与主字体的视觉大小一致。

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. （可选）针对特定指标进行调整

虽然 x 高度是默认且最常见的，但您也可以按其他指标进行标准化，例如 cap-height（适用于全部大写的标题）或 ch-width（适用于等宽字体）。

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. 验证视觉稳定性

确保 font-size-adjust 值与后备广告正确对应。您可以通过以下方式进行测试：在浏览器的开发者工具中暂时屏蔽网页字体或调整 font-family 声明，并验证文本布局是否保持稳定。

后备策略

在不支持 font-size-adjust 的浏览器中，字体将按默认比例呈现。这可能会导致在字体切换期间出现布局偏移或可读性变化。

如需在不使用 font-size-adjust 的情况下缓解此问题，您可以使用 @font-face 描述符 size-adjust、ascent-override 和 descent-override 手动调整后备字体，不过这些描述符的计算比单个 font-size-adjust 值更复杂。