在前端开发中，我们可能需要使用自定义字体（如Google Fonts），但有时候加载这些字体的时间可能很长。为了避免页面显示问题，我们需要确保字体已经成功加载才可使用。
本文将介绍如何判断字体是否已经加载，以及在加载完成之前暂时使用备用字体来避免页面显示问题。
判断字体是否已经加载
方法一：CSS Font Loading API
CSS Font Loading API 是用于字体加载的原生API，支持通过 JavaScript 检测字体是否已经加载完成。可以通过检查 document.fonts 对象的 fontface 规则列表来确定字体的加载状态。
示例代码：
------------------------------------ - ---------------- ----- --- --------- ---
上述代码在所有字体都加载完毕后输出 "All fonts are loaded"。
方法二：FontFaceSet API
FontFaceSet API 是 CSS Font Loading API 的替代方案，提供更多控制和信息。可以通过检查 document.fonts 对象的 size 和 ready 属性来确定字体的加载状态。
示例代码：
-- -------------------- --- -- - --------------- ----- ---- ---- ------ ------ - ---- - ------------------ ---- ------- ---- --------- -
上述代码在字体未加载时输出 "No fonts have been loaded yet"，在字体加载完成后输出 "Fonts have already been loaded"。
使用备用字体
在字体尚未加载完成时，为了避免出现页面显示问题，我们可以使用备用字体代替。CSS 提供了 font-display 属性来控制字体的加载和渲染行为。
示例代码：
---------- - ------------ -------- ------ ---- ------------------------- ---------------- ------------- --------- -
上述代码中，font-display: fallback 表示使用备用字体直到 Example Font 字体加载完毕。其他可选值包括：
auto：根据用户设备及网络状况自动选择最佳方案。block：暂时不显示文本，直到字体加载完毕再显示。swap：立即使用备用字体代替，然后异步加载 Example Font 字体，当字体加载完毕后再重新显示。
结论
通过 CSS Font Loading API 和 FontFaceSet API可以判断字体是否已经加载完成，而 font-display 属性则可用于在字体尚未加载完成时使用备用字体。这些技术可以帮助我们解决字体加载慢导致的页面显示问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12545