中文网页字体怎么搭才不土

很多中文站点看着"土"，问题不在配色也不在排版，而在字体搭配。默认的宋体加黑体，加上各种字号乱用，一眼就是十年前的味道。

先定两个角色

网页字体只需要分两个角色：正文和标题。正文负责长时间阅读，要稳、要清晰；标题负责抓住注意力，可以有性格。两个角色定清楚，就不会出现"全站五种字体"的混乱。

正文用什么

中文正文优先用系统自带的无衬线字体栈，不要加载几兆的字体文件：

font-family: -apple-system, "PingFang SC", "Microsoft YaHei",
             "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;

这个栈在 Mac 上走苹方，Windows 上走微软雅黑，Linux 上走思源黑体，各自都是系统里最舒服的阅读字体。字号 16px，行高 1.7 到 1.8，这是中文正文比较舒服的区间。

标题怎么加性格

标题想有辨识度，可以在"字重"和"字距"上做文章，而不是换一种花哨的字体。比如：

• 标题用 700 字重，正文 400，层级立刻拉开
• 大标题加 letter-spacing: 0.02em，小字加负字距，观感更精致
• 英文标题可以引入一个衬线体（如 Georgia、Playfair Display），和中文黑体形成对比

中英混排时，衬线英文配黑体中文是安全且高级的组合。反过来，手写体英文配宋体中文就容易显得杂乱。

三个常见错误

一是字号太多。一页里出现 12、14、15、16、18、20、24 七种字号，视觉会散。限制在 4 到 5 档就够：正文 16、辅助 14、小标 18、中标题 24、大标题 32。

二是字重滥用。全站到处加粗，等于没有重点。加粗只留给真正需要强调的词。

三是中英字体没对齐基线。英文字体和中文字体的 x-height 不一样，混排时英文会显得忽大忽小。解决办法是给英文单独设 font-size: 0.94em 之类的微调，或者干脆统一用同一套字族。

关于网络字体

如果确实要用特殊字体（比如品牌标题），只加载需要的字重和子集，并把 font-display 设为 swap，避免字体加载时白屏。中文字体动辄几兆，全量加载会严重拖慢首屏，这一点务必注意。