前端面试：如何用 font-size-adjust 稳定后备字体的可读性？

题干与适用场景

设计系统使用品牌字体，但网络、许可或脚本覆盖会让浏览器暂时或永久使用后备字体。请说明如何用 font-size-adjust 减少两套字体在小写字母可读尺寸上的跳变，并说明它与移动端文字自动放大的区别。

面试官考察点

• 是否理解字体的 x-height 与字号不是同一个度量。
• 是否能解释后备字体校准、字体加载和渐进降级的边界。
• 是否把视觉一致性、脚本覆盖和无障碍测试放在同一方案中。

回答前需要澄清的问题

1. 主字体和后备字体覆盖哪些语言脚本？
2. 目标是降低字体加载期间的跳变，还是长期使用后备字体也要可读？
3. 产品是否允许移动端文字自动放大，是否有既定的字号和行高令牌？

30 秒回答框架

先说 font-size-adjust 用字体的宽高比指标校准小写字母的相对高度；再说它不能让字形宽度、行高和 CJK 指标完全相同。方案上为主字体选择可测量的后备字体，逐步启用 from-font 或显式比例，并用脚本、缩放、加载失败和低视力场景验证。最后强调 text-size-adjust 处理的是移动端文字自动缩放，不能互相替代。

分步骤深入解答

1. 先区分字号与 x-height

font-size-adjust 保持小写字母相对主字体的可读高度。两个字体都设为 16px，x-height 仍可能不同；后备字体因此看起来更小或更大。该属性调整的是相对度量，不能复制主字体的字形设计。

2. 选择显式比例或 from-font

显式值适合团队已经测得主字体指标的情况。支持 from-font 时，可以要求浏览器从可用字体读取指标，减少手工常量；仍要验证目标浏览器和字体文件是否提供需要的指标。

3. 把校准放进字体栈

:root {
  --body-size: 1rem;
}

body {
  font-family: "Brand Sans", "Fallback Sans", sans-serif;
  font-size: var(--body-size);
  font-size-adjust: from-font;
  line-height: 1.5;
}

属性只影响使用它的元素及后代。将其放在正文令牌附近，避免局部组件各自采用不同的补偿值；若浏览器不支持，正常字体栈仍应可读。

4. 处理字体加载时序

校准不能消除字体交换带来的所有布局变化。配合合适的 font-display、预加载策略和可接受的后备字体，分别测量首屏可读性、文本重排和最终字体到达后的变化。不要为追求零跳变而隐藏正文。

5. 按脚本和语言验证

一个拉丁小写比例不能直接代表中文、日文、阿拉伯文或混排文本。为本地化字体栈建立样本页，检查标点、数字、粗细、换行和行高；必要时按语言令牌设置不同策略，而不是把比例写成全站真理。

6. 与 text-size-adjust 分工

text-size-adjust 控制浏览器在移动视口中对文字的自动放大。它不校准后备字体的 x-height。面试中应先判断问题来自字体度量还是移动端排版引擎，再选择属性，避免为了修复一种问题关闭另一种可访问行为。

7. 设定可观测验收标准

在真实设备和浏览器上记录字体加载成功率、文本布局变化、缩放后的截断和用户字体设置下的可读性。把视觉回归与屏幕阅读器、键盘操作和高对比度测试一起纳入发布门槛。

高质量示范回答

我会把它当成字体度量治理问题。先用主字体和候选后备字体的 x-height 样本确认差异，再在正文令牌上使用显式比例或 from-font，同时保留可靠的字体栈。它只能改善小写字母的相对可读尺寸，不能保证字宽、行高或 CJK 混排一致，所以我会测试字体加载成功与失败、不同脚本、浏览器缩放和移动设备。移动端自动放大则由 text-size-adjust 负责，不能用 font-size-adjust 代替。最后以实际布局变化、截断、可读性和无障碍结果作为验收，而不是只看一张截图。

常见错误

• 把 font-size-adjust 说成统一所有字体的字号。
• 把 from-font 当成所有浏览器和字体都能读取的保证。
• 用 text-size-adjust: none 粗暴关闭移动端放大。
• 只测英文首屏，不测本地化脚本和字体加载失败。
• 只看 CLS 数字，忽略缩放、用户字体设置和屏幕阅读器体验。

追问及应对

如果设计要求字宽也一致怎么办？

说明该属性只处理相对高度，字宽仍需选择更接近的后备字体、调整字距或重新设计换行；不要承诺一个比例能解决全部指标。

from-font 失败时如何降级？

让字体栈和默认字号本身可读，并通过特性检测或渐进增强使用显式值；把失败视为正常网络和浏览器条件，而不是渲染阻塞理由。

如何避免字体交换造成按钮跳动？

为按钮预留足够空间，校准后备字体并测量最终字体到达前后的宽度；关键操作不应依赖隐藏文本或不可预测的自动缩放。

CJK 页面也要设置同一个值吗？

不应直接复用。CJK 没有与拉丁小写完全对应的 x-height 语义，应按本地字体和行高样本单独验证。

如何证明没有损害无障碍？

测试浏览器缩放、系统字体偏好、重排后的焦点顺序、读屏朗读和高对比度；验证不以固定像素截图为唯一标准。

面试中如何谈浏览器支持？

给出目标浏览器矩阵和特性检测计划，说明不支持时仍使用可读字体栈。不要在没有矩阵或测试证据时声称全面支持。