CSS font-size-adjust 怎样让后备字体保持相近字高

当首选 Web 字体没有及时加载，页面会暂时使用后备字体。即使 CSS 中的 font-size 相同，不同字体的 x-height 也可能不同，结果就是正文显得忽大忽小、按钮高度改变，或字体切换后布局被推开。font-size-adjust 的作用正是按某个字体度量重新调整字号，让后备字体的可见字高更接近首选字体。

常规正文先从 font-size-adjust: 0.5 或与首选字体匹配的 ex-height 比例开始；如果需要按字体自身元数据取值，再考虑 from-font。这个属性会作用于所有实际参与渲染的字体，不只是后备字体，因此应把它当成整条字体栈的度量规则。

先用 ex-height 解决最常见的字高差异

font-size-adjust 默认使用 ex-height，也就是小写字母 x 高度与字号的比例。小字号正文的可读性通常更受小写字母高度影响，所以它适合作为第一种尝试。

下面的规则把字体栈中的文字基准字号设为 16px，并用 0.5 作为目标比例。这里的数值不是“把字号缩放到 50%”，而是目标字体度量与字号的比例。

.article-copy {
  /* 先给页面一个稳定的字体栈，首选字体不可用时才落到后备字体 */
  font-family: "Reading Sans", system-ui, sans-serif;
  font-size: 16px;

  /* 让小写字母的可见高度按目标比例保持接近 */
  font-size-adjust: 0.5;
}

如果首选字体的 x-height 比例就是 0.5，这个值能让它和后备字体尽量保持一致。若首选字体可用时也被明显放大或缩小，通常说明目标比例选错了，应重新估计首选字体的度量，而不是继续叠加 font-size 修补。

按排版目标选择字体度量

新语法允许把度量名称写出来。默认是 ex-height，但不是所有文本都只关心小写字母。可以按下表选择：

例如，标题由大写英文组成时，可以明确使用 cap-height，而不是套用正文的默认比例：

.eyebrow {
  /* 标签主要由大写字母组成，因此对齐 cap-height */
  font-family: "Display Sans", Arial, sans-serif;
  font-size: 14px;
  font-size-adjust: cap-height 0.72;
  letter-spacing: 0.08em;
}

度量值应该来自首选字体的实际比例或设计系统约定。不要把不同字体示例中的数字直接复制到所有项目；同一个数值换一套首选字体，结果可能就不再合适。

固定数值和 from-font 怎么选

固定数值适合设计系统已经确定目标比例的情况。例如，正文规范可以规定使用 ex-height 0.5，让各页面共享一个可审查的排版基准。

.prose {
  /* 固定比例便于多页面、多个后备字体共享同一基准 */
  font-size-adjust: ex-height 0.5;
}

.cjk-prose {
  /* CJK 文本可用 ic-height 作为垂直度量目标 */
  font-size-adjust: ic-height 1;
}

from-font 则从第一个可用字体取得所选度量的比例。例如下面的写法使用首个可用字体的 x-height 比例：

.fallback-friendly {
  /* 让浏览器从首个可用字体读取默认的度量比例 */
  font-size-adjust: ex-height from-font;
}

两者的差别在于：固定数值是明确的设计目标，from-font 是跟随字体元数据的运行时目标。若字体栈可能由多个平台字体组成，固定数值更容易保持跨平台的视觉约束；若字体文件的度量是可靠设计输入，from-font 可以减少手工记录比例的维护成本。

继承和 size-adjust 需要留出边界

这个属性可继承，初始值是 none，应用于所有元素和文本。父元素设置后，子元素会继承这条度量规则；如果标题需要另一种比例，应在标题自身明确覆盖，避免把正文比例悄悄带进组件。

还要注意它会调整每个实际参与渲染的字体，而不是只调整 fallback。如果首选字体已经可用，固定比例仍会影响它；如果目标只是改变一个首选字体的字号，直接修改 font-size 更直观。

@font-face 的 size-adjust 也会改写字体度量。当同一个度量已经被 size-adjust 覆盖时，font-size-adjust 的计算会使用覆盖后的度量，重复设置不会产生两次独立缩放。工程上应选择一个主要控制点，并把另一个属性的职责写在字体定义旁边。

:root {
  /* 根节点设置正文基准；局部组件可自行覆盖 */
  font-size-adjust: ex-height 0.5;
}

.heading {
  /* 标题单独声明度量，避免继承正文的目标比例 */
  font-size-adjust: cap-height 0.72;
}

@font-face {
  font-family: "Adjusted Fallback";
  src: local("Arial");
  /* 这里已经改写字体度量，不要再把它当作第二次缩放入口 */
  size-adjust: 96%;
}

旧浏览器如何保留可接受的降级

MDN 将该属性标为 Baseline 2024，较新的设备和浏览器通常支持，但旧设备可能不支持完整的新语法。最稳妥的写法是先提供普通字体栈，再追加增强规则；不识别属性的浏览器会忽略它，仍然可以显示文字。

body {
  /* 未支持 font-size-adjust 的浏览器仍能正常使用这个字体栈 */
  font-family: "Reading Sans", system-ui, sans-serif;
  font-size: 16px;
}

@supports (font-size-adjust: 0.5) {
  body {
    /* 支持的浏览器再启用字高归一化 */
    font-size-adjust: ex-height 0.5;
  }
}

如果项目必须支持更旧的浏览器，不要把布局高度依赖在这条属性上；应让容器允许自然增长，避免把某个具体字体的行高假设写死。兼容性检查关注的是“文字是否仍可读、组件是否能增长”，而不是要求所有平台的像素高度完全相等。

几个容易混淆的问题

font-size-adjust 会改变 line-height 吗？

它调整字体使用的字号以匹配选定度量，实际行盒仍会受到 line-height、字体度量和布局上下文影响。因此不要把它理解为直接设置行高；如果组件需要稳定纵向节奏，仍要明确设计 line-height 并允许内容溢出时自然增长。

数字 0.5 能直接理解成字体缩小一半吗？

不能。它是目标度量与字号的比例。实际调整结果还取决于当前字体的对应度量，概念上可以写成 调整后字号 = 目标比例 ÷ 当前字体比例 × 原字号。

什么时候应该用 @font-face 的 size-adjust？

当你需要在字体定义层为某个明确的后备字体改写度量时，size-adjust 更集中；当你要让一组文本根据目标度量调整字号时，font-size-adjust 更直接。两者配合前先确认谁负责最终度量，避免重复调整。

小结

font-size-adjust 解决的是字体度量不一致，不是字体加载速度。正文通常从默认的 ex-height 开始，标题或 CJK 排版再按目标选择 cap-height、ic-width 或 ic-height；固定数值便于跨平台审查，from-font 适合依赖字体元数据的场景。最后保留普通字体栈，并把 size-adjust 与继承边界写清楚，旧浏览器就能自然降级。