中文网页排版里几个容易忽略的 CSS 属性

给这个小站改样式的时候，顺手查了几个和中文排版有关的 CSS 属性。有的已经能用，有的只有部分浏览器支持，记一下现状。

标点挤压：text-spacing-trim

中文的全角标点自带半个字宽的空白，两个标点挨在一起（比如句号后面跟着右引号）就会空得过分。text-spacing-trim 让浏览器自动压缩这类空白：

body { text-spacing-trim: trim-start; }

trim-start 会压掉行首开括号前的空白，同时处理相邻的标点。Chromium 系的浏览器已经支持，不支持的会直接忽略，没有副作用。

中西文间距：text-autospace

中文里夹着英文和数字时，很多人习惯手动加空格。text-autospace 让浏览器自动在中西文之间留出一点间隙，不用改原文：

body { text-autospace: normal; }

目前支持还不广。我的做法是写的时候照旧手动加空格，这个属性只当锦上添花。

两端对齐

中文正文用 text-align: justify 通常效果不错，因为汉字等宽，拉伸出来的空隙会均匀分到字与字之间。但段落里有长串英文或者长链接时，会出现很难看的大空档，所以这里没有开。

行宽和行高

这两个不是什么新属性，但对阅读体验影响最大。我的经验值：

• 每行 30 到 40 个汉字比较舒服。这里用的是 max-width: 35rem，大约 35 个字。
• 中文正文的行高要比英文大，1.7 到 1.9 之间。英文常用的 1.5 放到中文上会显得挤。

字体

不加载任何网络字体，只写系统字体栈：苹果设备上是苹方，Windows 上是微软雅黑，Linux 上一般是思源黑体。标题用宋体，在 Windows 上效果差一些，可以接受。一套中文字体动辄好几 MB，为了一个笔记本不值得。

各属性的支持情况变得很快，以浏览器兼容性表格的最新数据为准。