一、起源

在阅读我自己的博客文章时，有一个困扰我的问题，浏览器并不会向Word这样自动给中西文之间添加间距。由于中文和西文并非同种语言体系，因此在没有间距进行区分时，中西文易混淆，导致我们的阅读速度下降。给中西文添加间距，本质上是提前做好标记，便于区分，从而提高阅读速度，避免回读，这种差距在长文中尤为明显。

二、探索

查阅了MDM网站，发现2025年CSS添加了一个新特性text-autospace，通过设置这个参数，可以让CJK字符与西文中自动添加间距。兼容性方面，截至目前，除了Samsung Internet以外的大部分浏览器最新版本均已支持这个属性。遗憾的是，虽然这个属性得到了支持，但绝大多数浏览器只支持no-autospace (禁用CJK和非CJK字符间的自动间距) 和normal (自动在CJK字符与非CJK字符之间以及标点符号周围添加间距)，而不能支持其他更多用法。全部属性值如下所示：

• normal
  创建默认行为，自动在 CJK 字符与非 CJK 字符之间以及标点符号周围添加间距。此值的效果等同于同时应用 ideograph-alpha 和 ideograph-numeric。

• <autospace>
  提供对间距行为的更精细控制。支持关键字 no-autospace，或组合使用 ideograph-alpha、ideograph-numeric 和 punctuation 中的一种或多种，可选地跟随 insert 或 replace。

  • no-autospace
    禁用CJK和非CJK字符间的自动间距行为。

  • ideograph-alpha
    仅在表意文字（如片假名和汉字）与非表意字母（如拉丁字母）之间添加间距。不会在表意文字与非表意数字之间添加间距。

  • ideograph-numeric
    仅在表意文字（如片假名和汉字）与非表意数字（如拉丁数字）之间添加间距。不会在表意文字与非表意字母之间添加间距。

  • punctuation
    根据特定语言的排版规范，在标点符号周围添加不可分割的间距。

  • insert
    仅当表意文字与非表意文字之间不存在现有空格时，才添加指定的间距。

  • replace
    将表意文字与非表意文字之间的现有间距（例如U+0020）替换为指定的间距。

• auto
  允许浏览器选择符合排版规范的间距。不同浏览器和平台间的间距可能存在差异。

三、解决

要使用CSS的这个新特性，我们只需在网页内定义我们的CSS样式即可，以下是一个应用到所有<p>标签的示例：

/* 设置p标签的中西文自动间距 */
p {
  text-autospace: normal;
}