在网页上实现中文排版：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，要评估对搜索、复制的影响）。