如果你經常寫內容類應用，一定有過這樣的困惑：

為什么中文和英文、數字混在一起，總是看起來那么別扭？

比如「我愛Vue」、「版本2.0」，這些混排的文字總顯得擠在一起、不太舒服。

不管你怎么換字體、調字距，都達不到那種自然的效果。

這其實不是你的鍋，也不是設計師的問題——而是瀏覽器長期沒有正確處理中文與西文混排的間距。

在中文網頁排版的世界里，這個問題已經困擾了我們很多年。

曾經的無解時代

根據中文排版規范，當漢字與西文或數字相鄰時，應當有一個微小的間距。

這被稱為“文字間距”或“中西文混排間距”。

過去，我們為了讓排版更舒服，試過各種土辦法：

?用腳本在中英文之間自動加空格；

?在字體文件里做字距補丁；

?甚至用 letter-spacing、word-spacing 硬調。

但這些方法都不完美：有的破壞語義，有的導致對齊錯亂，還有的在不同瀏覽器下效果完全不同。

想讓下面這段話顯示得順眼：

我愛Vue，也愛React。

幾乎得靠一點“玄學”調試。

CSS 給出的答案：text-autospace

現在，終于有了官方方案。

在最新的 CSS Text 模塊中，W3C 定義了一個新屬性：

text-autospace: normal;

text-autospace 是 CSS Text Module Level 4 中新增的規范。

它的核心目的就是自動處理表意文字（如中文 CJK）與非表意文字（西文、數字等）之間的間距。

通俗點講，就是——在中文（或日文、韓文）與英文、數字之間，自動插入合適的視覺間距，

讓排版更自然、更有呼吸感，不再貼在一起。

原來在網頁中是這樣的：

圖片

加上這個屬性后，就變成了這樣：

圖片

差別雖然細微，但閱讀體驗完全不同。

當頁面里有大量中英混排時，整篇文字會更均衡、更舒服。

目前，我注意到知乎已經啟用了這個 CSS 屬性。作為一個內容類網站，為他們點個贊！

兼容性：終于等來了黃金時代

其實，這個屬性在很多年前的草案里就已經被提出，但一直沒人實現。直到最近，情況終于發生了變化：

圖片

也就是說，現在主流瀏覽器幾乎都支持了！

中文排版那點“小別扭”，終于能用標準 CSS 解決了。

使用建議

使用也很簡單，只需一行 CSS，就可以在全局生效（推薦寫在 body 或 :root 上）：

:root {
  /* 啟用自動混排間距 */
  text-autospace: normal;
}

不過，為了保險起見，建議加上兼容判斷：

@supports (text-autospace: normal) {
  :root {
    text-autospace: normal;
  }
}

這樣舊瀏覽器會自動忽略這個屬性，不會出錯。

寫在最后

這些年，中文網頁的中英文混排一直是個小麻煩。

為了那半個空格，我們寫過正則、改過字體、甚至造過插件。

現在，一個標準 CSS 屬性就能搞定：

text-autospace: normal;

這不僅是中文排版的改進，更是漢字文化影響 Web 的一個新起點。