字体预加载怎么写才真正有效？

公孙润恺提问于 2026-03-29 13:30:17 阅读 21

优化

我在项目里用了 Google Fonts，但页面首次加载时文字还是会闪一下无样式状态（FOIT），想通过预加载优化。试过在 head 里加 <link rel="preload" as="font">，但浏览器控制台报错说格式不对，而且字体好像也没提前加载。

我现在的写法是这样的：

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="external nofollow"  as="font" type="font/woff2" crossorigin>

是不是哪里搞错了？Google Fonts 返回的是 CSS 文件，不是直接的字体文件，这样能预加载吗？

字体预加载预加载策略

我来解答赞 5 收藏

反馈

2 条解答

UX-浩然 Lv1

问题在于你预加载的是CSS而不是字体文件。试试这样：

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2" as="font" type="font/woff2" crossorigin>

直接从CSS里找到实际字体文件链接来预加载，记得把 href 替换为你实际用到的字体URL。这招我试过好几次，FOIT基本能解决。

2026-03-31 18:03

Prog.慧娇 Lv1

你说得对，问题就出在你试图直接预加载 CSS 文件而不是字体文件本身。Google Fonts 返回的是 CSS 文件，里面包含了 @font-face 规则和字体的 URL，所以你的 rel="preload" 写法确实不太对。

这里有个更靠谱的做法：

首先，在 head 里保留 Google Fonts 的链接：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

然后你需要找到实际的字体文件 URL。打开浏览器开发者工具，在 Network 面板里查看加载的字体文件。假设找到的字体文件是 WOFF2 格式的，就可以这样预加载：

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2" as="font" type="font/woff2" crossorigin>

注意几点：要加 crossorigin 属性，因为字体通常跨域加载；as 要设置为 font；type 设置正确也很重要。

做完这些，FOIT 应该会明显改善。别忘了测试不同网络情况下的表现，有时候 CDN 缓存也会有影响。这活儿真挺烦人的，但为了用户体验值了。

2026-03-29 13:31