字体、字重与字体回退

先理解这个概念

字体既影响气质也影响字面大小、可读性和加载性能。界面正文优先考虑稳定易读的字形，代码采用等宽字体。中英文混排要观察视觉大小与基线，不能仅凭 font-size 相同就认为协调。

字体不是只影响气质，也决定字面大小、标点位置、数字宽度与换行。相同的 font-size，换一个字体可能看起来更大，也可能让按钮多出一行。中文、英文、数字与符号通常来自不同字体，回退链因此是实际排版的一部分，而不是加载失败后的临时补救。

记住这三个原则

1. 01

   从系统字体或少量经过验证的字体开始。

2. 02

   确认所需字重真实存在，避免依赖浏览器合成。

3. 03

   测试中文、英文、数字与符号的混排。

实际设计时，分三步做

1. STEP 01

   选择正文与标题角色，先用真实中文、英文术语和数字排一段，不用只有几个漂亮汉字的样张作决定。

2. STEP 02

   检查常用字重是否真的存在。缺失字重可能被合成，细节与预期不同；不要依赖极细字重承载辅助信息。

3. STEP 03

   模拟自定义字体未加载的状态，检查回退字体的行数、按钮宽度和内容跳动；把关键布局做成可伸缩。

一个容易理解的例子

减少不必要的视觉变化和字体加载依赖。

body { font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

适用边界与取舍

品牌字体越独特，覆盖语言、下载体积和授权成本越需要评估。系统字体能减少加载依赖，但不同平台外观不完全一致，应接受合理差异并保持结构稳定。