中文网页排版的几个细节：字体、标点和中英文间距

中文页面看起来“精致”还是“粗糙”，很多时候差在几个排版细节上。

1. 字体栈：系统字体优先

中文字体文件动辄几 MB，作为网络字体加载会明显拖慢首屏。正文直接用各系统自带的中文字体就很好看：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}

确实需要特殊字体（比如标题用宋体）时，只把用到的字做成子集，几十 KB 就够了。

2. 行高和段落间距

中文正文行高 1.7～1.8 比较舒服。段落之间用 margin 拉开，不要用空行或 <br> 堆出来。

3. 中英文之间的间距

中文和英文、数字之间留一点空隙更易读。CSS 新属性 text-autospace 可以自动加上这段间距，较新的 Chrome 已经支持；不支持的浏览器里，写作时手动在中英文之间加一个空格是最稳妥的做法。

4. 标题换行

多行标题加上 text-wrap: balance，每行长度会更均匀；正文用 text-wrap: pretty，可以避免最后一行只剩一个字。不支持的浏览器会按普通方式换行，没有副作用。

5. 窄栏不要两端对齐

text-align: justify 在中英文混排的窄栏里很容易拉出大段空隙，手机端尤其明显。正文保持左对齐即可。