中文排版助手

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

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

什么时候用

网页/文章/公众号/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;
}

或直接用加粗。

9. 字号与行宽

font-size: 16px;      /* 网页正文最小值，17-18px 更舒适 */
max-width: 38em;      /* 中文一行 30-40 字最舒服 */

一行超过 45 个汉字，眼睛回扫会累。

10. 数字与单位

• 数字用半角：2026 年不是２０２６年
• 数字与单位间加空格：5 GB、30 分钟（中文单位可不加：5个→5 个更清晰）
• 表格里的数字用等宽对齐：font-variant-numeric: tabular-nums;

可直接用的基础样式

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-serif: "Songti SC", "Noto Serif SC", Georgia, serif;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;      /* 中文微调，别超过 0.05em */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

article {
  max-width: 38em;
  margin: 0 auto;
}

p { margin-bottom: 1.5em; }

h1, h2, h3 {
  line-height: 1.35;
  letter-spacing: 0;           /* 大字号不需要额外字距 */
  margin: 2em 0 0.8em;
}

/* 中英混排自动间距（现代浏览器）*/
body { text-spacing-trim: normal; }

/* 着重号 */
em {
  font-style: normal;
  text-emphasis: dot;
  text-emphasis-position: under right;
}

/* 表格数字对齐 */
td.num { font-variant-numeric: tabular-nums; text-align: right; }

常见问题速查

症状	原因	解法
中文网页"说不上哪里丑"	行高太小	line-height: 1.75
中英文挤在一起	缺盘古之白	手动加空格或用 text-spacing-trim
英文单词被截断	word-break: break-all	改成 normal
标点出现在行首	没设避头尾	line-break: strict
加粗中文变模糊	字体没有真 Bold，被伪粗	用思源黑体等有多字重的字体
一行字太长看着累	没限宽	max-width: 38em
斜体中文很难看	中文无真斜体	改用加粗或着重号

公众号排版特殊规则

• 正文字号 15-16px（微信默认 17px 偏大）
• 行高 1.75
• 段间距 1em，不要首行缩进
• 两端不留白边（微信已有边距）
• 不要用系统外字体，会失效
• 图片宽度 100%，圆角 4-8px

边界

1. 不替用户决定品牌字体。商用字体有授权问题（如方正、汉仪部分字体商用需付费），涉及商业项目时提醒核实授权。
2. 不确定的规范要说明。大陆/港台/新马排版规范有差异，涉及具体出版规范时建议查对应标准（如 GB/T 15834 标点符号用法）。
3. 免费可商用中文字体推荐：思源黑体/宋体（SIL OFL）、阿里巴巴普惠体、HarmonyOS Sans、霞鹜文楷。用之前仍建议核对最新授权条款。