网页字体加载慢？Web Font 性能优化实操指南

为什么网页字体总在“闪一下”

打开网页时文字先显示成默认字体、再“啪”地换成品牌字体，这种现象叫 FOUT（Flash of Unstyled Text）。根因通常是字体文件太大、加载时机不对。网页字体的体验，一半在设计，一半在性能。

选对字体格式，体积先减半

现代浏览器优先支持 WOFF2，压缩率比 TTF 高不少；老旧系统再回退到 WOFF。不要在网页里直接丢一个几 MB 的 TTF，移动端会非常吃力。中文因字形多、单字库体积天然偏大，更要注意格式与子集化。

用 font-display 控制显示策略

CSS 的 font-display 决定字体没加载完时怎么显示：swap 先显示回退字体再替换，避免空白；optional 则更激进，网络差时直接用系统字。按你对品牌字体的坚持程度选策略，体验优先推荐 swap。

子集化与预加载

中文全字库动辄数 MB，但一个页面用到的字有限。通过子集化只打包需要的字形，体积能砍掉九成以上。配合 <link rel="preload"> 提前加载关键字体，首屏文字几乎不再等待。

本地缓存与 CDN

给字体设合理的缓存头，用户二次访问直接命中本地；跨地域站点用 CDN 就近分发，进一步压低延迟。字体与图片一样，是前端性能清单里不能忽略的一项。

取舍：品牌字体 vs 加载速度

不是所有场景都值得为品牌字体牺牲速度。官网首屏、落地页值得用；后台系统、内部工具用系统字更稳妥。把字体预算花在刀刃上，读者既感受到品牌，又不被加载拖垮。