当我们在网站上使用自定义字体时，为了避免用户在页面中出现闪烁或者 FOUC（Flash of Unstyled Content）的情况，我们通常会使用 @font-face 属性来加载自定义字体。
但是，在某些情况下，即使是使用 @font-face 属性进行字体加载，仍然会出现 FOUC 等问题。这时候我们可以尝试使用预加载来解决这些问题。
什么是预加载？
预加载是指在网页加载过程中，提前加载页面所需资源的一种技术手段。通过预加载，可以减少页面加载时间和网络带宽消耗，并提高用户体验。
如何预加载 @font-face 字体？
预加载 @font-face 字体的方法有两种：
- 使用 JavaScript 方式预加载
- 使用 CSS 方式预加载
使用 JavaScript 方式预加载
使用 JavaScript 方式预加载 @font-face 字体的代码如下所示：
--- ---- - --- ---------------------- --------------------------- --------------------------- - -- ------------- ---
其中，FontFace 对象表示一个字体文件对象，load() 方法用于加载字体，返回一个 Promise 对象。
使用 JavaScript 方式预加载 @font-face 字体的优点是可以通过编写更加灵活的 JavaScript 代码来控制字体的加载和缓存。
使用 CSS 方式预加载
使用 CSS 方式预加载 @font-face 字体的代码如下所示：
---------- - ------------ ----------- ---- ------------------------ ------------- ----- - ----------- - -------- --- -------- ----- ------------ ----------- -
其中，font-display 属性表示在字体未加载完成时，浏览器如何处理当前文本。swap 表示在字体未加载完成时，先显示默认字体，等到自定义字体加载完毕后再替换为自定义字体，从而避免 FOUC 的出现。
body:before 是一个看不见的伪元素，用于强制浏览器加载自定义字体。
使用 CSS 方式预加载 @font-face 字体的优点是可以通过写更少的代码实现字体预加载。
结语
通过本篇文章，你已经学会了如何使用预加载技术解决 @font-face 字体加载中出现的 FOUC 等问题。
在实际开发中，我们可以根据项目需要选择适合自己的预加载方式，并结合具体的场景编写相应的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25974