要让备用字体的视觉大小与网页字体匹配，可以用 CSS font-size-adjust 统一它们的 x 高度，或用 size-adjust 缩放特定的备用字体。本指南将介绍如何在 Mac 桌面浏览器中选择、计算和测试调整值。

选择适合文本的度量指标

对于普通的英文正文，先从 x 高度入手：它指小写字母相对于字体大小的高度。两种字体都设为 16px 时，x 高度可能不同，因此相同的 CSS 字号看起来不一定一样大。MDN 明确指出，font-size-adjust 用于统一渲染文本所用字体之间选定的字体度量指标。MDN：font-size-adjust

在更改数值之前，先选定度量指标。小写字母较多的段落通常适合使用 ex-height；全大写标签可能需要 cap-height。ch-width 选项会统一数字零字符的字宽，这与匹配小写字母高度解决的是不同问题。这些选项都无法保证每个单词的宽度相同。MDN：font-size-adjust 值

对于此任务，请使用一个合成页面，其中包含标题 Sample collection、标签 Tile 024，以及段落 Amber tiles sit beside a blue circle. Each tile has a short label.。目标是让备用字体的小写文本看起来大小相近，同时确认这些元素仍能容纳在原有空间内。

你当前的任务 从以下方式开始 另行检查的内容
统一字体栈中的小写字母大小 使用 font-size-adjust 和目标 x 高度比例 换行和行距
调整一种已知的备用字体 为备用字体别名设置 size-adjust 系统中是否有这个确切的本地字体
减少垂直布局差异 匹配字号后使用字体度量覆盖 基线和段落高度

前两种机制的作用范围不同：font-size-adjust 应用于文本，而 size-adjust 则属于 @font-face 规则，会缩放该字体的字形轮廓和度量指标。MDN：font-size-adjust，MDN：size-adjust

在 Mac 上建立可靠的对比

使用一个可以编辑样式表的预览页面。以下示例将现有网页字体称为 Sample Web；请替换为它实际的 CSS 字体系列名称。这些是集成代码片段，假设网页字体已声明，示例元素也已存在。

在 Mac 上使用 Chrome 时，右键点击示例段落并选择 Inspect。也可以按 Command + Option + C，再选择该段落。Chrome 会打开 Elements 面板，其中的 Styles 会显示已应用的 CSS。Chrome：打开 Chrome DevTools

打开 Computed，滚动到 Rendered Fonts，确认实际用于绘制示例文本的字体。仅有已声明的字体系列列表，并不能证明首选字体正在渲染。Chrome 的文档说明了如何使用此部分区分本地字体资源和网络字体资源。Chrome：应用其他效果

对比期间，保持视口、缩放比例、字重、字体样式、字间距和容器宽度不变。先检查网页字体状态，再暂时将段落的 font-family 改为预期的备用字体，例如 Arial, sans-serif，然后再次检查实际渲染的字体。

使用 Styles 编辑声明，并通过复选框切换调整值。这样就能在不改变段落文字或布局的情况下进行对比。Chrome：CSS 功能参考

通过 JavaScript 进行测量时，应等待相关字体加载完成，而不要使用随意设定的延迟。document.fonts.load() 可以请求指定的字体；document.fonts.ready 会在文档字体加载及相关布局操作完成后解析。两者都不能替代对实际渲染字体的检查。MDN：FontFaceSet.load()，MDN：FontFaceSet.ready

计算并应用目标 x 高度比例

数值型 font-size-adjust 的目标是一个比例，而不是放大百分比。如果能获得确切字体的相关度量值，请用网页字体的 x 高度除以其 em 单位数。随后，浏览器会将所选字体调整到已声明字号的这一目标比例。W3C：CSS Fonts Module Level 5

下面是明确标注为示例的数据，并非任何特定字体的实际测量值：

度量值 目标网页字体 备用字体
每 em 单位数 1,000 1,000
字体单位中的 x 高度 520 470
x 高度比例 0.52 0.47

在声明字号为 16px 时，目标 x 高度为 16 × 0.52 = 8.32px。要达到该高度，备用字体需要乘以 0.52 ÷ 0.47，约为 1.106383。调整后的渲染字号约为 17.7021px。这些计算用于说明规范中的公式，并不能预测实际的换行结果。

对于基于属性的做法，将目标比例应用于文本。此 CSS 片段假设示例段落使用类名 sample-copy：

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

这里的 0.52 属于示例网页字体。请替换为目标字体的比例。提供不准确的数值也会改变首选字体的渲染大小；该属性会作用于所有选定字体，包括网页字体。W3C：CSS Fonts Module Level 5

如果没有可靠的比例，W3C 介绍了一种视觉校准方法：比较相同字体、字号和内容的两个样例，一个关闭调整，另一个使用试验性的数值调整。从 0.5 开始逐步微调，直到两者相符。校准时可使用放大的独立样例，然后恢复正常阅读字号来判断效果。将通过视觉得出的数值视为近似值。W3C：CSS Fonts Module Level 5

关键字 from-font 会从第一个可用字体获取目标。如果预期的网页字体不可用，目标可能来自另一种字体。若备用字体必须匹配已知网页字体，即使网页字体从未加载，也应使用确定的数值比例。MDN：font-size-adjust 值

需要控制一种字体时使用备用字体别名

如果你想让缩放仅应用于某种特定的备用字体，请选择 size-adjust。对于上面的示例字体对，将缩放系数换算为百分比：100 × 0.52 ÷ 0.47 = 110.6383%。此描述符会同时缩放字形的字宽、轮廓和其他相关度量值。MDN：size-adjust

这个替代集成代码片段假设本地有 Arial Regular，且目标网页字体已经声明。此百分比仅为示例，采用前请测量你实际使用的字体对：

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

这个合成别名可让调整仅作用于此字体栈。其 local() 来源会指定某个具体字体，而不是任意选择系统无衬线字体。CSS Fonts 规范建议提供完整名称和 PostScript 名称，以便跨平台匹配。如果两种来源都不可用，浏览器会继续尝试字体列表中的其他字体。W3C：CSS Fonts Module Level 4

请将此方法作为前一种方法的替代方案。如果文本使用经过 size-adjust 调整的字体，再对文本应用 font-size-adjust 可能会抵消预期的缩放，因为该属性使用的是已覆盖的度量值。MDN：font-size-adjust 说明

分别诊断换行和基线差异

匹配小写字母高度后，在预期宽度下比较标题、标签和段落。一个实用的检查顺序是：先检查视觉大小，再检查行尾，最后检查文本块总高度。这样可以区分三种可见的问题，避免因此不断修改同一个百分比。

如果小写字母大小看起来合适，但段落换行不同，请先比较另一种备用字体，再进一步调整缩放值。按一种高度度量进行缩放，并不会让不同字体设计的字形具有完全相同的字宽。分别记录网页字体和备用字体状态下每行最后一个词，以便明确剩余差异。

如果基线或文本块高度仍然不同，请检查 ascent-override、descent-override 和 line-gap-override。这些属性控制布局度量值，并不提供另一个视觉字号目标。例如，ascent 是基线以上、用于行框布局的度量值。请根据实际字体对计算覆盖值，而不要照搬无关的百分比。MDN：ascent-override

要生成一组初始值，Capsize 文档中的 createFontStack 可按首选字体顺序接收度量值，并同时返回 fontFamily 和备用字体 fontFaces。请一起使用这两项输出。其文档还介绍了适用于内置字体的 @capsizecss/metrics，以及用于从自定义文件提取度量值的 @capsizecss/unpack。生成的声明仍需结合示例布局进行测试。Capsize 文档

保持浏览器布局和文本塑形不变

Canvas 测量可以帮助对比字符串，但它只能回答范围更窄的问题。WHATWG 将 measureText().width 定义为前进宽度，而实际的边界框测量描述的是绘制后的文本。Canvas 会将文本排布在一个假设的无限宽行中，因此它测得的宽度并不等于 DOM 段落换行后的宽度。WHATWG：HTML Standard，Canvas

测试时请保留完整单词和句子。不要将文本拆成单独定位的字符重新构建，也不要假设将字符宽度相加就能还原经塑形的字符串。CSS 规定了行内边界两侧如何进行文本塑形，包括存在间距或对齐变化的边界。验证字体回退时，请保留组件的正常结构。W3C：CSS Text Module Level 3

检查浏览器支持并完成对比

MDN 将基础版 font-size-adjust 列为 Baseline 2024，并说明 size-adjust 自 2023 年 9 月起已广泛支持。这并不代表较旧的浏览器支持所有较新的度量指标或关键字。请查看你实际使用语法的兼容性表。MDN：font-size-adjust，MDN：size-adjust

如果浏览器不支持高级度量形式，可以在适合该任务时使用受支持的数值型 x 高度统一方式，或使用受支持的、针对特定备用字体的描述符。如果所需调整完全不受支持，请保留视觉上接近的备用字体，并在该浏览器中检查未调整的布局。

最后，对你使用的每种字重和样式重复比较，再在计划支持的 Mac 浏览器中逐一检查。每次都确认实际渲染的字体。只有当合成标题、标签和段落在网页字体和备用字体状态下的视觉大小、换行及间距都可以接受时，才保留所选调整值。

来源