CSS text-box-edge 怎样让英文标题按字高和基线对齐

我在做英文卡片标题时，最先想到的通常是调小 line-height，再用上下 padding 把它“推”到合适的位置。但字体的上缘、下缘并不等于一个机械的矩形，换字体后，标题常常又会多出一截留白。CSS 的 text-box-trim 和 text-box-edge 适合把这个问题从“调数值”改成“描述文字边缘”。

要让英文标题贴近大写字高和基线，先用 text-box-trim: trim-both 开启裁剪，再用 text-box-edge: cap alphabetic 指定上下边缘；旧浏览器继续保留 line-height 兜底。

我为什么不再只调 line-height

line-height 解决的是行框高度，而不是“上边缘贴到大写字母顶部、下边缘贴到基线”这个排版意图。字体文件还会带有 ascender、descender 和行距信息，同样的字号换一套字体，标题周围的空白就可能变化。

这里的模式很简单：把字体度量看成输入，把文字框裁剪看成布局规则，把卡片内边距留给卡片本身。这样标题规则表达的是字框边界，组件规则表达的是组件间距，后面更换字体时不容易互相牵连。

用 text-box-edge 描述标题的视觉边缘

text-box-edge 负责说明要裁到哪个字体边缘，但它只有在 text-box-trim 不是 none 时才有作用。英文标题常见的组合是 cap alphabetic：上边缘贴近大写字母高度，下边缘贴近文字基线。

.card-title {
  /* 让标题上下两侧都参与文字框裁剪 */
  text-box-trim: trim-both;
  /* 上边缘对齐大写字高，下边缘对齐基线 */
  text-box-edge: cap alphabetic;
  /* 保留一个稳定的字体大小，避免把裁剪当成缩放 */
  font-size: 2rem;
}

.card-title--small {
  /* 小写字母占主导时，可把上边缘改成 x-height */
  text-box-edge: ex alphabetic;
}

如果标题主要由小写字母构成，ex alphabetic 会比 cap alphabetic 更接近小写字母的视觉高度。这里没有绝对的“最好值”：标题内容、字体和设计稿的对齐基准不同，选择也会不同。

把规则收进 shorthand，避免组件样式互相覆盖

在组件里，我更喜欢把这两个属性放在一起表达，因为它们分别回答“裁哪一侧”和“裁到哪里”。text-box 是对应的简写属性，可读性更集中。

.promo-heading {
  /* shorthand 同时指定裁剪范围与字体边缘 */
  text-box: trim-both cap alphabetic;
  /* 组件间距仍由 margin 控制，不混进字体度量 */
  margin-block: 0.75rem;
}

.promo-heading + .promo-copy {
  /* 用相邻内容的间距表达布局关系 */
  margin-block-start: 1rem;
}

这个拆分的好处是，标题的文字框边界和标题与正文之间的距离各自有名字。反过来，如果只写 text-box-edge 而忘了 text-box-trim，你会发现样式像“没有生效”；如果把所有空白都压进 line-height，以后换字体时又要重新调一遍。

兼容边界：新属性与旧样式怎样共存

这组属性在 MDN 上标为 Baseline 2026 的新能力，项目仍应把它当作渐进增强，而不是让旧浏览器失去可读性。先给一个保守的基础样式，再用 @supports 覆盖支持精确文字框的环境。

.card-title {
  /* 旧环境至少保留可读的行框和组件间距 */
  line-height: 1.1;
  margin-block: 0.75rem;
}

@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .card-title {
    /* 支持时再启用按字体边缘裁剪 */
    text-box: trim-both cap alphabetic;
    margin-block: 0;
  }
}

@supports 只负责判断声明是否被解析，不替你决定字体的视觉效果。因此仍要把设计稿的对齐目标说清楚：是对齐大写字高、对齐小写字高，还是只需要一个近似稳定的行框。对中文标题或混合文字，也不要直接套用英文的 cap 结论。

我的判断清单

• 需要英文标题贴近大写字母顶部和基线时，先试 trim-both cap alphabetic。
• 小写字母视觉占主导时，比较 ex alphabetic 是否更符合设计目标。
• 不要把 text-box-edge 当成独立开关，确认同时开启了 text-box-trim。
• 把组件外边距留在 margin，不要用字体行框承担全部卡片间距。
• 面向多浏览器发布时，用基础 line-height 加 @supports 做渐进增强。

相关问题

text-box-edge 和 text-box-trim 有什么区别？前者选择要对齐的字体边缘，后者决定裁剪哪一侧；两者配合才会改变文字框。

为什么只写 text-box-edge 没有变化？因为 text-box-edge 在 text-box-trim: none 时没有效果，先检查裁剪属性是否开启。

旧浏览器必须放弃这个方案吗？不必。保留 line-height、间距和可读性，再用 @supports 给支持的环境增强即可。