讲清 Web 字体的加载策略与图标的三种实现方式。下面按“先判断、再动手、最后验证”的顺序展开，每一步都给出可核对的检查点。
涉及 字体加载、图标方案、Web字体 的关键动作都写成了具体命令或配置项，可以照着走，也可以当检查表用。
font-display 用 swap 避免空白，子集化中文字体能砍掉九成体积，按页面用到的字生成。
首屏用的字体文件加 preload，与 CSS 分开判断，预加载了没用到的文件会浪费带宽。
SVG 内联最可控、字体图标省事但有闪烁、PNG 雪碧图已过时。
字体不超过两款，图标只引入用到的，整包引图标库是最常见的浪费。
断网测试字体加载失败的降级效果，正文不能出现布局跳动。
| 环节 | 关键动作 |
|---|---|
| 加载策略 | font-display 用 swap 避免空白，子集化中文字体能砍掉九成体积，按页面用到的字生成 |
| 预加载 | 首屏用的字体文件加 preload，与 CSS 分开判断，预加载了没用到的文件会浪费带宽 |
| 图标三方案 | SVG 内联最可控、字体图标省事但有闪烁、PNG 雪碧图已过时 |
| 数量控制 | 字体不超过两款，图标只引入用到的，整包引图标库是最常见的浪费 |
Q：按文中写法改完，怎么确认真的生效？
不要只看配置文件，用对应的验证命令或从外部视角复测一次；改完先小流量观察一段，再全量推进，出问题能马上回退。
Q：按文中的步骤做完，还需要注意什么？
把处理过程和最终生效的参数记下来。同类问题再出现时直接对照记录，比重查一遍快得多。
Q：业务规模小，也要按这套标准来吗？
不需要一次到位。先把影响最大的两项做到位，剩余的随着业务增长逐步补齐，比一开始就追求完美更容易落地。
回到这篇的 5 个环节：加载策略、预加载、图标三方案、数量控制、验收。把这几个动作写进检查表，下次遇到同类问题按顺序过一遍，比凭经验跳步骤稳。
微信公众号
微信客服
