自定义字体加载时文字闪烁怎么解决？

Newb.爱娜提问于 2026-02-18 18:15:25 阅读 5

优化

我在项目里用@font-face引入woff2字体文件，但页面加载时总会出现文字闪烁。试过设置font-display: swap和预加载，但效果不明显，有没有更好的优化方法？


@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('/fonts/custom.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 这样设置还不够吗？ */
}
body {
  font-family: 'CustomFont', sans-serif;
}

测试发现当网络较慢时，文字会先显示系统默认字体再切换成自定义字体，导致明显闪烁。除了拆分字体文件体积，还有啥能控制字体加载优先级的方案？

字体优化资源优化

我来解答赞 3 收藏

反馈

1 条解答

东方博文 Lv1

文字闪烁的问题确实挺烦人的，尤其是自定义字体加载慢的时候。你提到的 font-display: swap 和预加载其实已经是比较常见的优化手段了，但它们并不是万能的。下面我来详细说说怎么解决这个问题。

首先你要明白为什么会闪烁。浏览器在加载网页时，如果自定义字体还没加载完，就会先用系统默认字体渲染文字，等字体文件加载完成后才切换成自定义字体。这种切换就是导致闪烁的根本原因。font-display: swap 的作用是允许这种切换，但它并不能完全避免闪烁，只是尽量缩短无字体的时间。所以你需要更彻底的解决方案。

第一步：提前加载字体
为了让字体文件尽早加载，可以使用 preload 来提升字体的加载优先级。你在 HTML 的里加上这么一行：

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

这里的关键点是 as="font" 和 type="font/woff2"，它们告诉浏览器这是一个字体文件，需要优先加载。crossorigin 是必须的，因为字体文件通常是跨域请求。

如果你有多个字体文件，比如不同权重的字体，记得对每个文件都加上预加载。

第二步：内联关键字体
对于一些特别重要的字体，你可以考虑将字体文件直接内联到 CSS 中。这样可以避免额外的 HTTP 请求，让字体文件更快可用。不过这种方法适合字体文件体积较小的情况。具体做法是把字体文件转成 Base64 编码，然后嵌入到 CSS 里：

@font-face {

  font-family: 'CustomFont';

  src: url('data:application/font-woff2;charset=utf-8;base64,<Base64编码>') format('woff2');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

的部分可以用工具生成，比如用在线的 Base64 编码器。不过要注意，内联会增加 CSS 文件的体积，所以只适合小字体文件。

第三步：使用本地缓存
如果用户已经访问过你的网站，可以通过浏览器缓存减少字体加载时间。确保你的服务器配置了正确的缓存策略，比如设置 Cache-Control 和 Expires 头：

Cache-Control: public, max-age=31536000

Expires: 1 year

这样用户的浏览器会在第一次加载后缓存字体文件，下次访问时就不用再下载了。

第四步：使用 Font Loading API
如果你需要更精细地控制字体加载行为，可以试试 Font Loading API。它允许你监听字体加载的状态，并在字体加载完成后再渲染文字。比如这样：

document.fonts.ready.then(() => {

  // 字体加载完成后执行的操作

  console.log('字体加载完成');

});

你还可以结合这个 API 手动控制某些元素的显示时机，避免文字闪烁。

第五步：备用字体的样式匹配
有时候闪烁的原因不只是加载速度问题，还可能是因为备用字体和自定义字体的样式差异太大。你可以在 CSS 中尽量让备用字体接近自定义字体的样式，比如调整字号、行高和字重：

body {

  font-family: 'CustomFont', Arial, sans-serif;

  font-size: 16px;

  line-height: 1.5;

  font-weight: 400;

}

虽然备用字体还是会有差异，但至少视觉上的跳跃感会小一些。

最后一步：测试和监控
不管用了哪种方法，最后一定要多做测试，尤其是在不同的网络环境下。你可以用 Chrome DevTools 模拟慢速网络，看看字体加载的效果。另外也可以用 Lighthouse 或者 WebPageTest 这类工具分析字体加载的性能瓶颈。

总结一下，解决字体闪烁的核心思路是：减少字体加载时间、优化加载优先级、尽量缩小备用字体和自定义字体的视觉差异。通过预加载、内联字体、缓存策略和 Font Loading API 等方法结合起来，基本可以搞定大部分场景。希望这些方案对你有帮助！

2026-02-18 18:17