chinese-typography

中文排版助手

中文网页丑，八成不是设计问题，是排版问题。

大部分模板是按西文设计的，直接拿来放中文，会同时踩到十几个坑：行高不够、中英挤在一起、标点占位不对、断行断在不该断的地方。

什么时候用

网页/文章/公众号/PDF/Word/PPT 的中文排版，选字体，中英混排，修"说不上哪里丑"的中文页面。

第一步：确认载体

不同载体规则差别大：

载体	关键差异
网页	可用 CSS 控制，字体要考虑加载
公众号	内联样式，字体受限，宽度固定
Word/PDF	首行缩进传统，字号用磅
PPT	字号大、行数少、对比强

中文排版的 10 条核心规则

1. 中英文之间加空格（盘古之白）

❌ 我用Python写了一个爬虫
✅ 我用 Python 写了一个爬虫

数字同理：3 个苹果、iPhone 15 Pro

例外：标点旁边不加——使用 Python，然后……（逗号前不加）

2. 行高要比西文大

中文字符方正饱满，行高不够会挤成一团。

line-height: 1.75;   /* 正文，1.6-1.8 都可以 */
line-height: 1.35;   /* 大标题可以紧一些 */

西文常用的 1.4-1.5 放中文会显得压抑。

3. 字体栈要写对

font-family:
  -apple-system, BlinkMacSystemFont,   /* 苹方 / SF */
  "Segoe UI", Roboto,                   /* 西文优先 */
  "PingFang SC", "Hiragino Sans GB",    /* 苹果中文 */
  "Microsoft YaHei", "微软雅黑",         /* Windows */
  "Source Han Sans SC", "Noto Sans CJK SC",  /* 思源 */
  sans-serif;

顺序原则：西文字体放前面，中文字体放后面。这样英文用西文字体渲染，中文自动 fallback，混排更好看。

衬线（正文长阅读 / 文艺感）：

font-family: "Songti SC", "SimSun", "Noto Serif SC", Georgia, serif;

4. 标点：全角还是半角

场景	用法
中文句子	全角：，。？！：；""''
英文句子	半角：, . ? ! : ; " '
中文句中的英文	英文内部用半角，句子结束用全角句号

括号：中文内容用全角（），英文内容用半角 ()

省略号：中文用 ……（六点），不是 ...

破折号：中文用 ——（两个），不是 --

5. 引号

• 简体大陆规范："" 和 ''
• 港台 / 文艺排版：「」 和 『』

统一即可，不要混用。

6. CJK 断行控制

word-break: normal;        /* 不要用 break-all，会把英文单词拦腰截断 */
overflow-wrap: anywhere;   /* 超长 URL 才需要 */
line-break: strict;        /* 严格避头尾（标点不出现在行首）*/

避头尾规则：。，、；：？！）》」 不能出现在行首；（《「 不能出现在行尾。

7. 段落：缩进还是间距

载体	推荐
网页	段间距（margin-bottom: 1.5em），不缩进
印刷 / Word / PDF	首行缩进 2 字符（text-indent: 2em）

⚠️ 不要同时用——又缩进又空行是排版新手最常见的错误。

8. 着重强调

中文不用下划线，也慎用斜体（中文没有真正的斜体，会被拉斜变形）。

/* 着重号（中文传统做法）*/
em {
  font-style: normal;
  text-emphasis: dot;
  text-emphasis-position: under right;
}