你有没有遇到过这样的情况：打开一个网页，其他内容都出来了，就文字区域一片空白，等了几秒突然“蹦”出文字？或者文字先显示默认字体，加载完又突然变样，整个页面布局跟着晃一下？这背后其实都是字体加载在搞鬼。作为前端开发，咱们天天和这些细节打交道，字体加载优化看着小，却直接影响用户会不会留下来——毕竟谁愿意等一个加载半天的网页呢？
字体加载那些让人头疼的问题，你中招了吗？
先说个真实案例：之前帮一个电商网站做性能优化，他们首页用了一套定制的无衬线字体，看着确实高级，但Lighthouse检测时，“累积布局偏移（CLS）”直接飙到0.3以上（谷歌 CLS要低于0.1才合格）。后来发现，就是字体加载慢导致的：默认字体先显示，等自定义字体加载完，文字宽度变化，按钮和商品卡片跟着移位，用户一不小心就点错地方。老板说后台数据显示，首页加载3秒内没看到完整内容的用户，跳出率比正常情况高40%，这损失可不小。
你可能没注意的“隐形杀手”：FOIT和FOUT
这俩词听着专业，其实就是字体加载时的两种常见现象。FOIT（Flash of Invisible Text）就是刚才说的“文字空白”——浏览器为了等自定义字体加载，会先把文字藏起来，默认等待3秒左右，超时了才显示系统默认字体。你想想，用户打开页面，看到图片和按钮都出来了，就文字是空白，是不是会以为页面卡了？
FOUT（Flash of Unstyled Text）稍微好点，是先显示默认字体，等自定义字体加载完再替换。但问题是，如果两种字体的尺寸、行高不一样，替换时页面布局就会“跳一下”，这就是前面说的CLS。谷歌的Core Web Vitals把CLS列为三大核心指标之一，直接影响SEO排名，你说重不重要？
字体文件太大，加载速度拖后腿
很多时候字体加载慢，不是你的代码写得不好，而是字体文件本身就“太胖”。我见过最夸张的，一个.ttf格式的中文字体文件居然有8MB，相当于20张高清图片的大小！在4G环境下，光加载这个字体就要3-5秒，用户早就划走了。为啥这么大？因为中文字体包含的字符多，不像英文字体只有26个字母，加上标点符号也就百十来个字符。如果直接用完整的中文字体包，加载速度肯定慢。
还有个坑是“字体滥用”：有些项目为了视觉效果，一个页面用3-4种不同字体，每种字体又加载多个字重（常规、加粗、斜体），加起来文件体积直接翻倍。我之前接手一个官网，发现他们同时加载了思源黑体、Roboto、Font Awesome三个字体库，总大小超过15MB，后来精简到只保留必要的2个字体，加载速度快了70%。
亲测有效的6个CSS字体加载优化技巧，学了就能用
说了这么多问题，该上干货了。这6个技巧是我做过20+网站优化 出来的，从加载策略到文件处理，每个都能实实在在提升性能，而且实现起来不难，新手也能上手。
技巧1：用preload提前“预约”字体资源
你知道吗？浏览器加载资源是有优先级的，默认情况下，CSS里引用的字体文件要等CSS解析完才会开始加载。如果你的CSS文件比较大，或者字体文件放在第三方服务器，加载就更慢了。这时候“预加载”（preload）就能派上用场——告诉浏览器：“这个字体很重要，你先帮我加载它！”
具体怎么做呢？在HTML的里加一段代码：
这里有几个关键点：as="font"告诉浏览器这是字体文件，type="font/woff2"指定格式，crossorigin必须加（即使字体和网站同域，浏览器加载字体时也会用CORS请求）。
不过要注意，preload不是万能的，不能滥用。如果你预加载了用不到的字体，反而会浪费带宽，拖慢其他资源加载。我一般只对首页、首屏必须显示的字体用preload，比如网站logo字体、导航栏文字字体。之前帮一个教育网站优化，他们首页banner的标题用了定制字体，加了preload后，字体加载完成时间从2.8秒提前到1.2秒，首屏渲染快了不少。
技巧2：font-display控制字体“出场方式”，告别闪烁和偏移
解决FOIT和FOUT最直接的方法，就是用CSS的font-display属性。它就像给字体加载“定规矩”：什么时候显示、显示多久、超时了怎么办。我整理了一个表格，帮你快速看懂各个属性的效果：
| 属性值 | 表现效果 | 适用场景 |
|---|---|---|
| auto | 浏览器默认行为（可能FOIT也可能FOUT，不同浏览器不一样） | 不推荐，效果不稳定 |
| swap | 立即显示默认字体，等自定义字体加载完替换（FOUT） | 优先保证内容可见，比如正文、按钮文字 |
| fallback | 先隐藏文字0.1秒，超时显示默认字体，3秒内加载完替换 | 标题、logo等重要但允许短暂空白的文字 |
| optional | 类似fallback，但浏览器可能直接不加载自定义字体（比如弱网环境） | 非必需的装饰性文字，比如引用、标签 |
我自己最常用的是swap和fallback。正文文字用swap，保证用户能第一时间看到内容，哪怕字体暂时“不好看”；标题用fallback，允许0.1秒的空白，避免频繁替换导致的闪烁。之前有个客户坚持要用“有设计感”的标题字体，用了fallback后，既保留了设计效果，CLS也控制在了0.05以内，谷歌搜索排名还升了两位。
技巧3：选对字体格式，文件体积立减50%
字体格式选错了，等于从一开始就给自己挖坑。现在主流的字体格式有这么几种：TTF、OTF、WOFF、WOFF2，还有苹果的SFNT。其中WOFF2是目前性能最好的——它是W3C推荐的格式，压缩率比TTF/OTF高30%以上，而且所有现代浏览器都支持（IE除外，但现在谁还管IE呢）。
我做过测试，同一个中文字体，TTF格式是4MB，转成WOFF2后只有1.5MB，体积直接少了62.5%！加载速度自然快很多。怎么转格式？推荐用Font Squirrel的Webfont Generator（链接，nofollow），上传TTF文件，选WOFF2格式，还能顺便做字体子集化，一举两得。
另外要注意，别在CSS里同时引用多种格式，比如：
/ 不推荐：加载多个格式浪费带宽 / @font-face {
src: url('font.ttf'), url('font.woff2');
}
正确的做法是用src的优先级，让浏览器加载它支持的最优格式：
@font-face { src: url('font.woff2') format('woff2'), / 优先WOFF2 /
url('font.woff') format('woff'), / 其次WOFF /
url('font.ttf') format('truetype'); / 最后TTF（兼容旧浏览器） /
}
技巧4：只加载你需要的字符——字体子集化
刚才说中文字体文件大，是因为包含的字符太多。但很多时候，你根本用不到那么多字符。比如一个英文网站，加载中文字体干嘛？一个博客的正文，可能常用字就2000个，没必要加载包含8000+字符的完整字体包。这时候“字体子集化”就能帮上忙——只保留你需要的字符，文件体积能减少70%-90%！
怎么做呢？如果你用的是谷歌字体（Google Fonts），它自带子集化功能，选字体时可以勾选“Latin”“Latin Extended”等，只加载需要的字符集。如果是本地字体，Font Squirrel的工具（前面提到的）可以手动输入需要保留的字符，比如“ABCDEFG…12345…常用标点”，生成只包含这些字符的字体文件。
我之前帮一个科技博客优化，他们正文用“思源黑体”，但文章里90%是中文和基本标点，于是用子集化工具只保留了“GB2312”字符集（包含6763个常用汉字），字体文件从5MB压缩到800KB，加载速度快了84%，而且用户完全看不出区别——因为他们根本用不到那些生僻字。
技巧5：非关键字体“晚点加载”，别让它抢资源
不是所有字体都需要第一时间加载。比如页面底部的版权信息、侧边栏的标签云，这些内容用户可能滚动半天才能看到，完全可以等页面主要内容加载完再加载它们的字体。这时候可以用“异步加载”或者“条件加载”。
异步加载的简单做法是：用JavaScript动态创建标签加载字体CSS，或者把字体@font-face定义放在一个单独的CSS文件里，用media="print"加载（浏览器默认不加载print媒体的CSS），等页面加载完再改成media="all"。比如：
这样浏览器就会把这个CSS的加载优先级调低，不影响关键资源的加载。
条件加载更灵活：比如判断用户设备，如果是移动设备，就不加载某些装饰性字体（手机屏幕小，用户可能更在意加载速度）；或者等用户滚动到某个区域，再加载该区域的字体。我之前给一个长页面做优化，把页脚的“合作伙伴”Logo字体做成条件加载，只有用户滚动到页脚时才加载，首屏加载时间减少了1.2秒。
技巧6：利用缓存和CDN，让字体“一次加载，到处可用”
最后一个技巧虽然简单，但很多人会忽略——就是字体文件的缓存策略。字体文件一般很少变化，完全可以设置长缓存，比如缓存1年（31536000秒）。不过要配合“指纹命名”，比如font-v2.3.woff2，这样字体更新时，文件名变了，浏览器就会重新加载，不会用旧缓存。
把字体文件放到CDN上也能提速。CDN有多个节点，用户会从离他最近的节点下载字体，延迟更低。比如用阿里云、腾讯云的CDN，还能开启Gzip/Brotli压缩，进一步减小传输体积。我对比过，同一个WOFF2字体，放自己服务器加载需要800ms，用CDN后平均只要300ms，效果很明显。
对了，记得用Lighthouse或WebPageTest检测优化效果。在Chrome开发者工具里打开Lighthouse，勾选“性能”和“最佳实践”，跑完报告就能看到字体加载的具体问题，比如“未使用preload的关键字体”“字体文件未压缩”等，照着改就行。
你平时做字体加载优化时，有没有遇到过什么特别的坑？或者有什么独门技巧？欢迎在评论区分享，咱们一起把页面做得又快又好看！
选font-display属性值其实就像给字体加载“定规矩”，得看内容有多重要，用户多着急看到。你想想，正文文字和按钮上的字，用户打开页面第一眼就想读到吧？这种时候用swap准没错——浏览器会先把系统默认字体丢出来，让用户能立刻看到内容，等咱们的自定义字体加载完了，再安安静静替换上去。就像电商详情页的产品描述，用户急着看规格和价格，要是文字空白3秒，人家早划走了，用swap虽然开头字体“丑”点，但至少内容可见，总比丢用户强。
标题或者logo上的字就不一样了，它们是页面的“脸面”，稍微等一下没关系，但不能等太久。这种情况fallback就很合适：浏览器会先藏0.1秒文字，要是0.1秒内加载完自定义字体，直接显示；超时了就先上默认字体，再给3秒缓冲时间，3秒内加载完还是会替换。你看那些品牌官网的大标题，偶尔闪一下默认字体没人在意，但要是一直空白，用户还以为图片没加载出来呢。至于页面底部的版权信息、侧边栏的标签云这种“配角文字”，用optional最省心——浏览器会根据网络情况决定要不要加载，弱网环境下可能直接用默认字体，反正不影响主要体验，还能省点加载时间。对了，千万别用默认的auto，不同浏览器脾气不一样，有的藏文字有的直接显示，效果太不稳定，咱们前端开发还是得把控制权握在自己手里。
什么是FOIT和FOUT？它们对用户体验有什么影响？
FOIT（Flash of Invisible Text）指字体加载时浏览器暂时隐藏文字，等待自定义字体加载完成的现象，可能导致用户看到空白文本区域；FOUT（Flash of Unstyled Text）则是先显示系统默认字体，加载完成后替换为自定义字体，可能引发布局偏移。两者都会影响用户体验：FOIT可能让用户误以为页面卡顿，FOUT可能导致“跳屏”（累积布局偏移CLS升高），甚至让用户误触元素。
如何选择合适的font-display属性值优化字体加载？
根据内容重要性和加载需求选择：正文、按钮等需优先可见的文字，用swap（先显示默认字体再替换）；标题、logo等允许短暂空白的关键内容，用fallback（隐藏0.1秒后显示默认字体，3秒内加载完替换）；非必需的装饰性文字（如标签、引用），用optional（弱网环境可能不加载自定义字体）。避免用默认的auto，表现不稳定。
字体子集化具体怎么操作？有哪些推荐工具？
字体子集化即保留所需字符、删除冗余字符以减小文件体积。操作步骤：若用谷歌字体（Google Fonts），可直接勾选所需字符集（如Latin、GB2312）；本地字体可通过工具处理，推荐Font Squirrel的Webfont Generator（手动输入需保留的字符）、Fonttools（命令行工具）或Glyphhanger（自动提取网页实际使用的字符）。重点保留常用字、标点和必要符号，生僻字可剔除。
使用preload预加载字体时需要注意什么？
preload虽能提升加载优先级，但需避免滥用：仅预加载首屏关键字体（如标题、正文），非关键字体（如页脚文字）无需预加载；必须添加crossorigin属性（即使字体同域，浏览器也会按跨域请求处理）；指定正确的type（如font/woff2），帮助浏览器识别资源类型。滥用preload会占用带宽，反而拖慢其他关键资源加载。
如何检测字体加载优化是否有效？
推荐用Lighthouse（Chrome开发者工具内置）或WebPageTest检测：Lighthouse勾选“性能”项，查看“累积布局偏移（CLS）”是否低于0.1，“最大内容绘制（LCP）”是否在2.5秒内；WebPageTest可分析字体加载时间、是否存在FOIT/FOUT；也可通过浏览器“网络”面板查看字体文件大小（ WOFF2格式控制在1MB内）、加载耗时（目标＜1秒）。优化后需对比优化前后的指标变化，确保CLS和加载速度改善。
