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

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

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

## 一份起步样式

```css
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` | 见[《竖排》](https://docs.cocobook.com/link/1266) |
| 纵中横 | `text-combine-upright: all` | |
| 注音拼音 | `<ruby>`、`ruby-position` | 见[《注音和拼音》](https://docs.cocobook.com/link/1267) |
| 等宽数字 | `font-variant-numeric: tabular-nums` | 表格、价格 |
| 禁止人工加粗、拉斜 | `font-synthesis: none` | 字体没有对应字重时 |
| 调用字体功能 | `font-feature-settings: "halt"` 等 | 取决于字体是否支持 |

## 不支持的浏览器怎么办

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

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

## 中文字体栈

见[《中文字体栈怎么写》](https://docs.cocobook.com/link/1254)。

<p class="cb-refs-src" style="display:none;"><a href="https://docs.cocobook.com/link/1307#bkmrk-src-t10-css">参考资料</a><span class="cb-refs-n">5</span><span class="cb-refs-t">中文排版需求</span><span class="cb-refs-t">text-autospace</span><span class="cb-refs-t">CSS Text Module Level 4</span></p>