如何用font-size-adjust解决后备字体的尺寸差异问题？

一、font-size-adjust的运作逻辑 #

它的核心是基于**字体的x-height（小写字母x的高度）**来统一视觉尺寸。

每个字体都有「x-height与字号的比例」（称为aspect值）。比如你设置font-size:24px，目标网页字体的aspect是0.5，那它的x-height就是12px；但后备字体Arial的aspect约为0.58，同样24px字号下x-height会达到13.92px，视觉上就显得更大更拥挤。

font-size-adjust的作用是强制让后备字体的x-height和目标字体一致：你只需要指定目标字体的aspect值，浏览器会自动计算后备字体需要调整后的字号，公式为：
调整后字号 = 原字号 × (目标字体aspect值 / 后备字体aspect值)

举个实际例子：原字号24px，目标字体aspect为0.5，Arial的aspect为0.58，那Arial的调整后字号就是24 × (0.5/0.58) ≈20.69px，此时它的x-height为20.69×0.58≈12px，和目标字体完全匹配，视觉大小就统一了。

二、用不同选择器应用font-size-adjust的原因 #

这是为了区分「网页字体未加载」和「已加载」的两种状态：

• 当网页字体还在加载时，浏览器使用后备字体（比如Arial），此时给元素加上font-size-adjust，让后备字体的视觉尺寸适配目标字体；
• 当网页字体加载完成后，通过字体加载API（如document.fonts.ready）或CSS的font-display配合类名切换，移除font-size-adjust，让目标字体用原本设置的字号正常显示。

常见写法示例：

/* 初始状态：后备字体生效时应用调整 */
h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-size-adjust: 0.5; /* 填目标字体的aspect值 */
}

/* 字体加载完成后添加的类：恢复目标字体与原字号 */
h1.webfont-loaded {
  font-family: MySlowlyLoadedWebfont, Arial, sans-serif;
  font-size-adjust: none;
}

这么做的本质是：目标字体本身不需要调整，只有后备字体需要适配它的视觉基准。

三、调整Arial与你的网页字体匹配的具体步骤 #

1. 获取目标字体的aspect值：
   可以通过字体分析工具查看，或自行计算：找到字体中小写x的高度，除以字体的em大小（通常为1000或1024），得到的结果就是aspect值。比如目标字体x-height为500、em大小为1000，aspect值就是0.5。
2. 给元素设置font-size-adjust：
   直接把目标字体的aspect值写入属性即可，浏览器会自动识别当前生效的是后备字体并完成适配：

h1 {
  font-family: MySlowlyLoadedWebfont, Arial, sans-serif;
  font-size: 24px;
  font-size-adjust: 0.5; /* 替换为你的目标字体aspect值 */
}

不需要单独给Arial写规则，浏览器会自动处理后备字体的尺寸计算。

内容的提问来源于stack exchange，提问作者John Knoop