font pack · cjk-typography v1.0.0

中文排版四件套:回退栈 · 字号总表 · 系统栈 · 免费细体

先定场景与字族,再谈档位。档位(几档、多细、多宽、多高、几层影)在 cjk-thin-type-system。

三场景字号对照

场景 工具台 · h1 15–22px / body 14px / meta 11–12px

控制台标题 18px

正文 14px,数字开 tabular-nums:12,480 / 3.7% / 08:15。零 Web 字体优先。

meta 12px(中文取上限)· code 11–13px

场景 营销落地 · h1 clamp(2rem–7rem) 负字距 / body 16–17px

营销主标

正文 17px,行高 1.6:中文安全栈兜底,拉丁走 Inter。

mono eyebrow · ls .16em

场景 纸媒 / 电视 1920 · h1 64–110px / body ≥40px / meta ≥26px

纸媒标题:真字重衬线

正文四十像素起,远看才立得住。

UI / 脚注 ≥26px

免费细体中文三选:许可明确才进清单

Noto Sans SC(可变)

OFL-1.1

中文要细,首屏压得住的 150

npm @fontsource-variable/[email protected] · 可变 100–900 · 101 片 unicode-range

MiSans VF

Apache-2.0

许可最宽松的一份,其余一律 300

npm [email protected] · 可变 150–700 · 80KB CSS 分片

HarmonyOS Sans SC

Unlicense

几何方正,横向更好对齐

npm [email protected] · Light 300 · 82 片

上游项目主页未联网核对 → 标「待核」;CDN 与 npm 路径为 2026-10-06 实查

回退栈与地板

角色栈
正文 / UI"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
长文阅读"Noto Serif SC", "Source Han Serif SC", "Songti SC", serif
等宽"JetBrains Mono", "Maple Mono NF CN", ui-monospace, monospace
工具台系统栈system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif