字体预加载没生效是怎么回事？

设计师熙然提问于 2026-03-11 13:08:22 阅读 34

优化

我在项目里加了字体预加载，但页面加载时还是有明显的文字闪烁（FOIT），感觉预加载根本没起作用。

我是在 HTML 的 <head> 里加的这行：

<link rel="preload" as="font" type="font/woff2" href="/fonts/myfont.woff2" crossorigin>

字体文件路径确认是对的，浏览器 Network 面板也显示这个 .woff2 文件被加载了，但为什么还是闪一下无样式的文字？是不是还要配合 CSS 做什么处理？

字体预加载预加载策略

我来解答赞 2 收藏

反馈

2 条解答

子骞 Dev Lv1

你的预加载标签写对了，但问题是你没在CSS里用这个字体。preload只是提前下载，你得在CSS里用@font-face定义并应用它：

/* 先定义字体 */

@font-face {

  font-family: 'MyFont';  src: url('/fonts/myfont.woff2') format('woff2');

  font-display: swap; /* 这个很重要，防止FOIT */

}



/* 然后在需要的地方使用 */

body {

  font-family: 'MyFont', sans-serif;

}

另外，你那个crossorigin最好写成crossorigin="anonymous"，虽然不加浏览器有时候也能跑，但规范写法是这样的。

2026-03-12 19:09

UP主～伊果 Lv1

你的预加载写法没问题，字体也确实加载了，但问题不在预加载本身，而是CSS里没告诉浏览器该怎么处理字体加载过程中的文字显示。

预加载只是让浏览器提前下载字体，该怎么显示还得靠 font-display 这个CSS属性来控制。浏览器默认行为是等字体加载完才显示文字（所以会闪一下无样式的空白），你得换成 swap 模式，让浏览器先用系统字体显示，等你的字体加载完再替换。

在WordPress里这么改：

如果你的主题有自定义CSS功能，直接加：

@font-face {

  font-family: 'MyFont';

  src: url('/fonts/myfont.woff2') format('woff2');

  font-display: swap;

}

或者在主题的 style.css 里找到对应的 @font-face 规则，加上 font-display: swap; 这一行。

如果你的字体是通过 functions.php 加载的（比如用 wp_enqueue_style），那就在对应的CSS文件里改。

swap 是最常用的，会先用系统字体（比如宋体、苹方）显示，中文站特别需要这个，因为中文字体包普遍比较大，等加载完黄花菜都凉了。缺点是加载完成后会“闪”一下替换成你的字体，但总比半天看不见字强。

还有个 optional 值更激进，浏览器可以直接放弃加载你的字体只用系统字体，适合对视觉要求不那么高的场景。

2026-03-11 13:09