在前端开发中，我们经常使用自定义字体来优化网页的排版效果。不过，在使用 @font-face 的时候，有时会遇到一个问题：如何知道这个字体是否已经加载完成呢？本文将介绍如何使用 jQuery 监测字体的加载状态，并提供一些实用的示例代码。
原理
@font-face 是 CSS3 中新增的字体引入机制，可以让开发者轻松地通过 URL 引入自定义字体文件。当引入了一个 @font-face 字体时，浏览器会在后台异步下载字体文件。在字体下载完成之前，如果直接使用该字体，那么会出现 FOUC（Flash of Unstyled Content）闪烁问题，影响用户体验。因此，我们需要等到字体下载完成之后再使用它。
我们可以通过 JavaScript 来判断字体是否已经加载完成。具体方法是创建一个包含特定字体的临时元素，然后检查这个元素的宽度是否发生了变化。如果发生了变化，就说明字体已经被成功加载。根据这个思路，我们可以编写如下的代码：
-------- ---------------------- -
--- ---------- - -------------------------------------------------------
--- -------- - ------- -- --------
--- --------- - -----------------
--------- -----------
----- ----------
---- ----------
--------- ---------
----------- ------------ -- ---------------
-------------------------------------
--- ------------- - ------------------
--------------------------- ----------
--- -------- - ------------------
-------------------
------ ------------- --- ---------
-这个函数接受一个字体名称作为参数，然后创建一个包含测试字符串的临时元素，并将其设置为绝对定位、隐藏状态。接着，我们使用默认字体测量这个元素的宽度，记录下来作为“字体未加载时的宽度”。接下来，我们将该元素的字体设置为指定的字体名称，再次测量其宽度。如果两次测量的宽度不同，那么就说明字体已经加载完成。
示例
下面是一个基于 jQuery 的示例代码，演示如何在页面中引入自定义字体，并等待字体加载完毕后再应用到页面元素上：
--------- -----
------
------
----- ----------------
------------- -- ---------- ----------------
-------
---------- -
------------ ---------
---- ------------------ -------------------
-
-------- -
------------ --------- -----------
-
--------
------- ----------------------------------------------------------------------------
--------
------------ -
--- -------- - ---------
--- ------- - --------------
-- ------------------------ -
------------------------- ----------
- ---- -
--- ---------- - ---------------------- -
-- ------------------------ -
--------------------------
------------------------- ----------
-
-- ----
-
---
---------
-------
------
-- -----------------------------------
-------
-------在这个示例中，我们定义了一个名为 MyFont 的自定义字体，并将其应用到页面元素 .my-text 上。在页面加载完成后，我们调用 isFontLoaded 函数来检测该字体是否已经加载完
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25575