讲清 Web 字体的加载策略与图标的三种实现方式。下面按“先判断、再动手、最后验证”的顺序展开，每一步都给出可核对的检查点。

涉及 字体加载、图标方案、Web字体 的关键动作都写成了具体命令或配置项，可以照着走，也可以当检查表用。

加载策略

font-display 用 swap 避免空白，子集化中文字体能砍掉九成体积，按页面用到的字生成。

预加载

首屏用的字体文件加 preload，与 CSS 分开判断，预加载了没用到的文件会浪费带宽。

图标三方案

SVG 内联最可控、字体图标省事但有闪烁、PNG 雪碧图已过时。

数量控制

字体不超过两款，图标只引入用到的，整包引图标库是最常见的浪费。

验收

断网测试字体加载失败的降级效果，正文不能出现布局跳动。

速查表

常见问题

Q：按文中写法改完，怎么确认真的生效？
不要只看配置文件，用对应的验证命令或从外部视角复测一次；改完先小流量观察一段，再全量推进，出问题能马上回退。

Q：按文中的步骤做完，还需要注意什么？
把处理过程和最终生效的参数记下来。同类问题再出现时直接对照记录，比重查一遍快得多。

Q：业务规模小，也要按这套标准来吗？
不需要一次到位。先把影响最大的两项做到位，剩余的随着业务增长逐步补齐，比一开始就追求完美更容易落地。

小结

回到这篇的 5 个环节：加载策略、预加载、图标三方案、数量控制、验收。把这几个动作写进检查表，下次遇到同类问题按顺序过一遍，比凭经验跳步骤稳。

相关阅读：视频嵌入：自托管与平台的取舍、网站多语言：机翻与人工校对的组合、静态站点生成器：什么时候该用。

延伸阅读：图片与视频压缩：站点资源瘦身实操、网站打开慢的全链路定位、视频嵌入：自托管与平台的取舍。