字体栈
Font Stack
别名:字体栈字体回退备用字体字体族字体列表font stackfont-family
这是什么
按优先级排列的字体回退链：首选字体缺席时依次落到下一个，最后由通用族兜底。系统栈零下载、即时渲染，网络字体保品牌气质但要配 font-display 控制闪烁，本地优先则两者之间取平衡。栈的顺序就是渲染的决策顺序。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 正文与 UI 文字需要在任何设备上稳定渲染
- 品牌字体只覆盖部分字重或字符集，需要可靠回退
- 首屏性能敏感，不希望字体请求阻塞文字显示
✕ 不适用场景
- 排版完全依赖单一展示字体且缺失即失效（如 Logo 字标）
- 栈里堆了七八个几乎相同的字体，决策成本高却无收益
- 不同回退字体字宽差异过大，换字后版式崩坏
常见形式
系统栈
System stack
零下载零闪烁，随操作系统变化而变化
网络字体 + 回退
Web font + fallback
品牌一致性优先，需 font-display 与字宽度量对齐
本地优先
Local-first
先用同名本地字体，缺了再下载，兼顾速度与气质
实现要点
font-family@font-facefont-displaysize-adjust字体栈写成一行：'Inter', 'PingFang SC', system-ui, sans-serif。中文场景务必在拉丁字体后接中文族，否则汉字会落到丑陋的默认宋体。网络字体用 font-display: swap 或 optional；用 size-adjust / ascent-override 把回退字的字宽字高对齐到首选字体，换字瞬间不跳版。等宽场景单独维护 mono 栈。
平台 API
font-family@font-facefont-displayfont-weight代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | font-family |
| CSS | @font-face |
| Next.js | next/font 自动子集化与 size-adjust 对齐 |
相关概念
用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础搭配使用一行文字占的垂直空间，决定段落的松紧与呼吸。标题收紧（1.1～1.3）显得挺拔，正文放宽（1.5～1.8）利于逐行阅读，引文可以更松。优先用无单位倍数，让行高随字号缩放，而不是写死像素值。
基础搭配使用以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格搭配使用