如果你經(jīng)常寫內(nèi)容類應(yīng)用，一定有過這樣的困惑：

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

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

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

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

在中文網(wǎng)頁排版的世界里，這個問題已經(jīng)困擾了我們很多年。

曾經(jīng)的無解時代

根據(jù)中文排版規(guī)范，當(dāng)漢字與西文或數(shù)字相鄰時，應(yīng)當(dāng)有一個微小的間距。

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

過去，我們?yōu)榱俗屌虐娓娣囘^各種土辦法：

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

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

?甚至用 letter-spacing、word-spacing 硬調(diào)。

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

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

我愛Vue，也愛React。

幾乎得靠一點“玄學(xué)”調(diào)試。

CSS 給出的答案：text-autospace

現(xiàn)在，終于有了官方方案。

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

text-autospace: normal;

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

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

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

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

原來在網(wǎng)頁中是這樣的：

圖片

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

圖片

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

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

目前，我注意到知乎已經(jīng)啟用了這個 CSS 屬性。作為一個內(nèi)容類網(wǎng)站，為他們點個贊！

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

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

圖片

也就是說，現(xiàn)在主流瀏覽器幾乎都支持了！

中文排版那點“小別扭”，終于能用標(biāo)準(zhǔn) CSS 解決了。

使用建議

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

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

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

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

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

寫在最后

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

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

現(xiàn)在，一個標(biāo)準(zhǔn) CSS 屬性就能搞定：

text-autospace: normal;

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