前端面试题：如何用 text-box-trim 解决字体度量导致的垂直对齐？

题干与适用场景

设计系统中的按钮、标签和标题常以视觉稿的几何中心对齐，但 CSS 行框会保留字体的上、下 half-leading。请说明如何使用 text-box-trim 与 text-box-edge 控制文本盒子，给出兼容有限浏览器支持的落地方案，并解释字体加载、writing-mode 和可访问性风险。

面试官考察点

能否区分 glyph、字体度量、行框与元素盒模型。
能否准确解释 text-box-trim 的起始、结束和双向裁剪。
能否用 text-box-edge 选择 cap、ex、text、alphabetic 或 leading 边缘。
能否处理逻辑块方向、字体回退与渐进增强。
能否用真实浏览器矩阵、字体和可访问性证据验证方案。

回答前需要澄清的问题

目标是视觉居中、跨字体稳定，还是固定行高和基线对齐？
组件是否允许只在支持该特性的浏览器启用？
目标字体、字号、语言、writing-mode 和 zoom 范围是什么？
文本是否会换行，焦点环和点击区域是否必须保持不变？

30 秒回答框架

先说明传统行框包含字体 half-leading，导致同一 padding 在不同字体上视觉偏移。text-box-trim 裁剪块轴边缘，text-box-edge 决定参考的字体度量；可用 text-box 简写表达两者。生产上先保持现有尺寸作为回退，再用特性查询渐进增强，固定按钮的最小点击尺寸，最后按字体、语言、书写模式和辅助技术检查。

分步骤深入解答

1. 先画出四个盒子

区分字形实际绘制区域、字体度量、行盒和元素的 padding/border。裁剪文本盒只改变内容在块轴上的占用，不应被描述成改变字形轮廓或点击区域。

2. 解释 half-leading 来源

当 line-height 大于字体自身行高时，额外空间通常分配到行框两侧。不同字体的 ascender、descender、cap-height 和 x-height 不同，因此同样的 line-height 产生不同的视觉中心。

3. 选择 trim 边缘

text-box-trim 接受 none、trim-start、trim-end 和 trim-both。按钮常需要双向裁剪；标题可能只裁剪块轴起点，以保留与相邻段落的节奏。

4. 选择字体度量

text-box-edge 可选 cap、ex、text、alphabetic 或 leading 等边缘。cap 适合大写标题的视觉基准，text 更接近字体文本边界；应根据语言和实际字体测试，不能把某个度量当作所有字体的通用真值。

5. 使用简写并保留局部范围

css

.button {
  text-box: trim-both cap alphabetic;
  padding: 0.625rem 1rem;
}

简写同时表达 trim 和 edge。将规则限制在需要的组件，避免全局裁剪破坏段落行距、图标对齐或多行文本。

6. 处理逻辑书写方向

start 与 end 属于块轴逻辑边缘，会随 writing-mode 改变。横排、竖排和 direction 组合都要测量；不要用物理的 top/bottom 直觉替代逻辑定义。

7. 设计渐进增强

默认样式继续使用现有 line-height、padding 和最小高度；在 @supports (text-box-trim: trim-both) 中启用增强。若浏览器忽略声明，文本仍应可读，按钮仍满足触控和键盘操作尺寸。

8. 验证字体加载与可访问性

等待目标字体加载后再截图或测量，覆盖字体回退、慢网、zoom、系统字体和多语言。检查焦点指示、截断、屏幕阅读器顺序和实际点击矩形；视觉居中不能以牺牲可操作性换取。

设计取舍与边界

该特性可减少魔法负 margin 和逐字体偏移，但目前浏览器支持有限，且字体度量差异仍然存在。裁剪文本盒不会替代 line-height、padding、flex 对齐或合理的最小高度；多行正文、动态字体和复杂 inline 内容应谨慎使用。需要与设计稿对齐时，应记录目标字体、度量、浏览器版本和容差，而非只保存一张截图。

落地计划与证据

记录按钮、标题的字体、字号、语言、writing-mode 和目标容差。
以现有样式作为基线，加入 @supports 分支并锁定最小交互尺寸。
在 Chrome 133 及项目支持的其他浏览器中测试；MDN 的 Baseline 标记显示该属性仍属有限可用特性。
用真实字体和回退字体测量视觉偏移、焦点环、换行和 zoom 结果。
将截图、测量值、浏览器版本和回退策略写入组件验收记录。

常见误区与追问

误区一：把 trim 当成裁剪字形

它主要调整文本盒边缘，不会把字形轮廓按像素切掉。追问时应回到字体度量、行盒和元素盒模型。

误区二：全站设置 trim-both

段落、列表和多行内容需要正常行距。回答应说明组件级使用和回退边界。

误区三：只在默认字体上截图

字体加载失败、语言变化或系统字体会改变度量。必须纳入字体回退和慢网测试。

误区四：忽略逻辑轴

trim-start 不是永远的物理顶部。应在竖排和不同 direction 下验证块轴行为。

误区五：只看视觉，不看操作

裁剪不能缩小触控、键盘焦点或可读区域。追问时给出最小尺寸、焦点环和辅助技术检查。