中文网页排版清单：字体栈、行高、标点与中英混排怎么落地

英文排版的经验直接搬到中文上，通常会在几个地方翻车：字重写了个字体里根本没有的档位、行高按英文手感调完中文发挤、标点混进半角还夹着莫名其妙的空白。中文是方块字——字面率高、笔画密度大、标点占满一个字宽，这决定了它需要一套自己的参数。下面这份清单分四块，每一块都能直接落到 CSS 里。

字体栈：让西文管西文，中文管中文

font-family 的顺序不是随便排的。浏览器逐字回退：遇到一个字符，从左往右找第一个包含这个字形的字体。西文字体里没有汉字，会自动落到后面的中文字体；顺序反过来则相反——中文字体里同样含拉丁字母，英文会被它接管，而中文字体里的拉丁字形通常字面偏小、字腔偏紧，单独排英文会显得局促。

所以原则是：西文字体在前，中文字体在后。一个可以直接当起点的系统字体栈：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", sans-serif;
}

macOS 命中苹方，Windows 命中微软雅黑，都没有才回退到 Noto Sans SC（前提是你确实引入了它）。字体名最好在目标平台上实测一遍，不同系统版本预装的字体并不一致。

字重是下一个坑。中文字体能提供的档位很有限：思源黑体这类开源字库给到了从 ExtraLight 到 Heavy 的多档字重，系统预装的微软雅黑则只有 Light / Regular / Bold 这个量级的少数几档。当你在 CSS 里写 font-weight: 600，而字体里没有这一档时，浏览器要么就近取 700，要么直接做伪加粗——把笔画横向撑开。汉字笔画本来就密，横向撑开会把内部空隙糊掉，这是中文界面"看起来很脏"最常见的来源。斜体同理：汉字没有真正的斜体字形，浏览器只能把它整体推歪，中文强调请用字重或颜色，别用 font-style: italic。

另外：中文正文 16px 起步，不要用 12px 排大段中文。

行高、字距与两端对齐

行高是中文和英文体感差别最大的参数。拉丁字母有升部、降部和不规则外轮廓，行与行之间天然留出空隙；汉字是等宽方块，字面几乎填满 em 框，排在一起时行间几乎没有余量。所以英文调着舒服的 1.4，放到中文正文里会明显发挤——中文正文一般要到 1.6–1.8。写法上用无单位数值（line-height: 1.7）而不是固定像素，字号变化时比例会跟着走。

letter-spacing 在中文正文里要慎用。汉字本身已经排满字面框，再人为加字距会把方块之间的节奏打散，看起来像"字没对齐"。它更适合用在标题，或者全大写的西文。

text-align: justify 也一样要小心。中文没有词间空格，浏览器只能在字与字之间拉伸，很容易出现宽窄不一的"字河"。除非你已经控制了版心宽度和断行，中文正文用默认的左对齐更稳。

段落之间，短段落配段间距比首行缩进更好读，p { margin: 0 0 1em; } 这个量级就够。

标点、避头尾与中英混排

正文用中文全角标点（，。、；：？！（）《》），不要混进半角的 , 和 .。

避头尾是中文排版的硬规则：收尾型标点（。，、）不能出现在行首，起始型标点（（""）不能出现在行尾。浏览器默认会做这件事，严格程度由 line-break 控制——auto 是默认值，strict 最严格，loose 更宽松（适合窄栏），anywhere 基本放弃禁则。正文建议写 line-break: strict;，这个属性已是 Baseline 广泛可用，主流浏览器从 2020 年 7 月起都支持。

标点本身也有细节。W3C 的《中文排版需求》写明：中文破折号用 U+2E3A（⸺），占两个汉字宽，且不能因为换行被拆到两行；间隔号建议统一用 U+00B7（·），而不是日文的 U+30FB。这份文档由 W3C 国际化工作组下的中文布局任务团维护，但它自己声明仍属工作草案，适合当"需求地图"读，不要当成定稿标准引用。

中英混排的间距是另一个高频问题：常规做法是在中文与拉丁字母、数字之间留出约四分之一个汉字宽的空白。过去只能靠手敲空格（常说的"盘古之白"）或后处理脚本；现在 CSS 有了 text-autospace，可以自动处理 CJK 与非 CJK 字符之间的间距，取值包括 normal、no-autospace、ideograph-alpha、ideograph-numeric、punctuation，以及 insert / replace 修饰。MDN 上标为 Baseline 2025，也就是说可以放心开始用，但还是建议给旧版本浏览器留退路。

相关的 text-spacing-trim 用来挤压全角标点内部多余的空白（连续标点、行首行尾标点）。它目前仍被标为实验性，且要求字体本身带 halt 或 chws 这两个 OpenType 特性，没有就直接不生效。至于 hanging-punctuation（悬挂标点），效果好看但支持极不完整，目前基本只有 Safari 有实现，不要把它写进方案依赖。

中文字体上线：体积这关绕不过去

中文字体和西文字体最现实的差别是体积。仅 Unicode 汉字基本区（U+4E00–U+9FFF）就有两万多个字符，中文字体必须覆盖其中大部分。作为参照，思源黑体 2.005 的官方发布包里，简体中文（SC）压缩包一个就有约 90 MB。把字体文件直接丢进项目这条路，在中文上走不通。

常见的有三条路线：

• 系统字体优先：就是第一节那个字体栈。零下载体积、渲染最快，代价是不同系统字形不同，版式气质依赖用户机器。
• 用做好分片的托管方案：Google Fonts 上的 Noto Sans SC 就是按 unicode-range 切片分发的，返回的 CSS 里有上百段 @font-face，浏览器只下载当前页面真正用到的那几片。这是 CJK 网页字体能跑起来的关键机制。
• 自建分片或子集化：只保留站点实际用到的字符，或按 unicode-range 自己切。开源工具里，cn-font-split（Apache-2.0）专做 CJK 字体切割，支持 otf / ttf / woff2 多线程处理，至今仍在活跃更新；更早的"字蛛" font-spider（MIT）做 webfont 压缩与格式转换，但最近的提交停在 2022 年底，新项目可以优先考虑维护更活跃的方案。

还有一件事别忘：font-display。中文 webfont 加载慢，用 swap 至少可以避免文字长时间空白。

注意：授权以官方文本为准
思源黑体与思源宋体（Source Han Sans / Source Han Serif）采用 SIL Open Font License 1.1 授权，版权归 Adobe，并保留字体名 "Source"。OFL 允许商用与嵌入，但对改名分发、单独售卖字体软件等有明确约束。是否适用于你的具体场景，请直接阅读字体官方的 LICENSE 文本，不要只看二手摘要。

想先跑起来，成本最低的一条路是引入赫蹏（heti）——一个专为中文内容展示做的排版样式增强（MIT 授权），标点、间距、行距这些常规项已按通行中文排版规范处理好；想把基础打扎实，就拿着上面的清单逐条过一遍自己的页面，文案层面的空格与标点约定可以参考整理得比较全的《中文文案排版指北》。

字体本身还没定的话，本站「字体资源」分类里收了一批字库与字体工具站点，可以先从那里挑；规范与标准类的资料则集中在「设计规范」分类里。如果还在权衡授权边界，可以接着看 免费商用字体清单。