CSS text-spacing-trim 怎样处理 CJK 标点两侧空隙

中文页面里，括号、引号和句号有时会显得“挤”在一起，尤其是标点连续出现或落在行首、行尾时。text-spacing-trim 处理的正是 CJK 标点字形内部的间距与相邻标点之间的折叠规则，不是通用的 letter-spacing，也不会替你修正 line-height 或外边距。

实用做法是先以 normal 作为基线，再按版式目标选择 space-all、space-first 或 trim-start。但这个属性目前仍有兼容性限制，生产页面要保留默认排版作为降级结果。

先分清 text-spacing-trim 的作用范围

全角 CJK 标点通常占一个表意文字宽度，字形内部会留出空间，以便单独排版时对齐。当开引号、闭括号、句号和汉字连续出现时，这些内部空隙可能叠加，视觉上就像标点两侧多出了一格。

因此，下面这段 CSS 只把属性放在文章正文容器上，字体、字号和行高仍由原有样式决定：

.article-body {
  /* 让 CJK 标点采用规范的默认折叠规则，先建立可回退基线 */
  text-spacing-trim: normal;
  /* 这些排版参数不交给 text-spacing-trim 处理 */
  font-size: 1rem;
  line-height: 1.8;
}

四个值怎么选

normal 是默认值：行首开标点、行尾闭标点和相邻标点按常规 CJK 规则处理，并会折叠部分连续标点之间的空间。space-all 更保守，所有相关全角标点都保持全宽；需要严格保留字面宽度时可以优先考虑它。

space-first 基本遵循 normal，但会让首行以及显式换行后的每一行按全宽处理行首开标点。trim-start 则在每一行行首把开标点按半宽处理，适合希望正文左边界更紧凑的版式。

字体能力和渐进增强要一起考虑

属性能否真正调整间距，还取决于字体是否提供 OpenType 的 halt（Alternate Half Widths）或 chws（Contextual Half-width Spacing）特性。没有这些能力时，浏览器可能停用这类间距调整。不要只看 CSS 声明是否写进了样式表，应在目标字体和目标浏览器组合下观察结果。

.article-body {
  /* 不支持 text-spacing-trim 时，浏览器仍使用普通 CJK 排版 */
  text-spacing-trim: normal;
}

@supports (text-spacing-trim: trim-start) {
  .article-body--compact {
    /* 只在声明被识别时收紧每一行的开标点 */
    text-spacing-trim: trim-start;
  }
}

这里的 @supports 只能判断属性语法是否被识别，不能替代字体能力检查。对于新闻正文、合同文本等强调跨浏览器一致性的内容，保留 normal 通常比强行追求紧凑更稳妥。

用一组中文样例做回归检查

至少准备四类样例：行首的“「标题」”、行尾的“结论。”、连续标点“——”“「（内容）」”，以及包含显式换行的段落。分别切换四个值，观察左边界、右边界和标点相邻处，避免只拿一行短文本下结论。

还要检查字体替换、窄屏换行和无障碍字号放大。若目标浏览器不支持该属性，页面应仍能正常阅读；若切换字体后空隙变化，优先确认字体是否提供 halt/chws，再决定是否调整值。

常见问题

它能替代 letter-spacing 吗？

不能。text-spacing-trim面向 CJK 标点内部空间和特定相邻关系，letter-spacing则改变字符之间的整体字距；两者混用时应分别验证。

为什么写了属性却看不到变化？

常见原因是浏览器尚未实现、字体没有 halt/chws 特性，或测试文本没有触发行首、行尾及连续标点规则。先用对比样例和明确的字体声明排查。