跳转到主要内容

在网页上实现中文排版：CSS 速查

适合谁看：要把前面几页的中文排版规则落到网页上的前端开发者。

浏览器支持数据来自 MDN 兼容性表，截至 2026 年 10 月；上线前请到 MDN 再确认一次。

一份起步样式

html:lang(zh) {
  line-height: 1.75;
  text-autospace: normal;          /* 中西文之间自动加间距（这也是默认值） */
  text-spacing-trim: normal;       /* 连续标点挤压（Chrome 系） */
  line-break: strict;              /* 更严格的行首行尾禁则 */
  hanging-punctuation: none;
}
article p {
  text-indent: 2em;
  text-align: justify;
  margin: 0;
}
em:lang(zh) {
  font-style: normal;
  text-emphasis: filled circle;
  text-emphasis-position: under right;
}

属性对照

需求 CSS 说明
声明语言 HTML lang="zh-Hans" / zh-Hant 影响标点字形、换行、字体选择，最重要的一步
中西文间距 text-autospace Chrome 140、Firefox 145、Safari 18.4 起支持；默认值就是 normal，不想要时写 no-autospace
标点挤压 text-spacing-trim 目前只有 Chrome 系（123 起）支持
行首行尾禁则 line-break: strict 浏览器默认已处理大部分
段首缩进 text-indent: 2em 不要用全角空格
两端对齐 text-align: justify
着重号 text-emphasis、text-emphasis-position 中文在下方
竖排 writing-mode: vertical-rl 见《竖排》
纵中横 text-combine-upright: all
注音拼音 <ruby>、ruby-position 见《注音和拼音》
等宽数字 font-variant-numeric: tabular-nums 表格、价格
禁止人工加粗、拉斜 font-synthesis: none 字体没有对应字重时
调用字体功能 font-feature-settings: "halt" 等 取决于字体是否支持

不支持的浏览器怎么办

这些属性在不支持的浏览器里会被忽略，页面仍然正常显示，只是少了相应的优化。可以放心作为「渐进增强」加上。需要在所有浏览器里都有中西文间距时，有两种办法：

  • 在内容里统一手动加空格；
  • 用脚本在中西文之间插入带间距的元素（会改动 DOM，要评估对搜索、复制的影响）。

中文字体栈

见《中文字体栈怎么写》。

参考资料