text-autospace 介绍text-autospace 是 CSS Text Module Level 4 中引

text-autospace 是 CSS Text Module Level 4 中引入的一个属性，专门用于解决中日韩(CJK)文字与西文字符混排时的间距问题。它可以自动在汉字、假名等表意文字与拉丁字母、数字之间添加适当的空白，无需手动插入空格。

核心功能

传统的中文排版中，中英文混排时通常需要手动添加空格（如「你好 world」），但这样做有两个问题：

语义污染：空格字符改变了文本的实际内容，影响搜索和复制
间距过宽：ASCII 空格 (U+0020) 宽度约为 0.5em，而专业排版通常只需要 1/8em (0.125ic) 左右的微调

text-autospace 通过 CSS 渲染层自动添加这个间距，不影响底层文本内容。

语法与取值

text-autospace: normal;
text-autospace: no-autospace;
text-autospace: ideograph-alpha;
text-autospace: ideograph-numeric;
text-autospace: ideograph-alpha ideograph-numeric replace;
text-autospace: auto;

主要关键字

关键字	作用
`normal`	默认行为，相当于同时启用 `ideograph-alpha` 和 `ideograph-numeric`
`no-autospace`	关闭自动间距（当前浏览器实际默认值）
`ideograph-alpha`	仅在表意文字（汉字/假名）与拉丁字母之间添加间距
`ideograph-numeric`	仅在表意文字与阿拉伯数字之间添加间距
`punctuation`	在标点符号周围添加符合语言规范的间距（目前主要支持法语排版规范）
`insert`	仅当字符之间没有现有空格时才添加间距（默认行为）
`replace`	将已有的 ASCII 空格替换为适当的自动间距（适用于已有手动空格的内容）
`auto`	由浏览器自行选择排版上合适的间距值

使用示例

基础用法：全局启用

/* 推荐：在中英文和数字之间都自动添加间距 */
:root {
  text-autospace: normal;  /* 或 ideograph-alpha ideograph-numeric */
}

替换已有空格

如果你已有的内容中手动添加了空格（如「你好 world」），使用 replace 可以将这些过宽的空格替换为专业的窄间距：

.article {
  text-autospace: ideograph-alpha ideograph-numeric replace;
}

针对性控制

/* 只在汉字和英文之间加空格，汉字和数字之间不加 */
.tech-doc {
  text-autospace: ideograph-alpha;
}

/* 只在汉字和数字之间加空格（如「第1章」） */
.numbered-list {
  text-autospace: ideograph-numeric;
}

浏览器支持情况

截至2025年初，主流浏览器已开始支持，但默认行为与规范有差异：

浏览器	支持版本	默认行为	说明
Safari (macOS/iOS)	18.4+	`no-autospace` (关闭)	2025年4月更新，支持完整语法
Chrome/Edge	140+	`no-autospace` (关闭)	Chromium 内核，需手动在 CSS 中启用
Firefox	145+ 实现 146+ 默认启用	`no-autospace`	144+ 版本可通过 `about:config` 设置 `layout.css.text-autospace.enabled` 为 true 开启

注意：虽然 CSS 规范定义默认值为 normal（开启），但出于性能考虑，目前所有浏览器实现都将默认值设为 no-autospace（关闭），因此你需要显式设置才能启用该功能。

与 `letter-spacing` 的关系

text-autospace 是叠加的（additive）：

p {
  letter-spacing: 0.05em;       /* 基础字间距 */
  text-autospace: normal;       /* 额外的自动间距会叠加在上面 */
}

自动添加的间距会累加在 letter-spacing 和 word-spacing 之上。

兼容性处理建议

由于旧版浏览器不支持此属性，且目前浏览器默认关闭，建议采用渐进增强策略：

/* 基础样式：为所有浏览器提供轻微的字间距改善 */
body {
  letter-spacing: 0.01em;
}

/* 现代浏览器：启用专业的自动间距 */
@supports (text-autospace: normal) {
  body {
    letter-spacing: normal;  /* 恢复默认字间距 */
    text-autospace: normal;  /* 使用自动间距替代 */
  }
}

对于需要兼容旧浏览器的项目，目前仍需使用 pangu.js（盘古之白）这类 JavaScript 库作为回退方案，但要注意 text-autospace 生成的间距（1/8em）比手动空格更紧凑自然。

最佳实践

新项目：直接全局启用 text-autospace: normal，内容中不再手动添加中英混排空格
存量项目：如果使用 replace 关键字，可以在不修改 HTML 内容的情况下优化已有手动空格的显示效果
代码块除外：记得在 <pre>, <code> 等保持等宽字体的元素上重置为 text-autospace: no-autospace，避免破坏等宽对齐

text-autospace 介绍