如何知道是否已经加载了一个字体（@字体）？

在前端开发中，我们可能需要使用自定义字体（如Google Fonts），但有时候加载这些字体的时间可能很长。为了避免页面显示问题，我们需要确保字体已经成功加载才可使用。

本文将介绍如何判断字体是否已经加载，以及在加载完成之前暂时使用备用字体来避免页面显示问题。

判断字体是否已经加载

方法一：CSS Font Loading API

CSS Font Loading API 是用于字体加载的原生API，支持通过 JavaScript 检测字体是否已经加载完成。可以通过检查 document.fonts 对象的 fontface 规则列表来确定字体的加载状态。

示例代码：

document.fonts.ready.then(function() {
  console.log('All fonts are loaded');
});

上述代码在所有字体都加载完毕后输出 "All fonts are loaded"。

方法二：FontFaceSet API

FontFaceSet API 是 CSS Font Loading API 的替代方案，提供更多控制和信息。可以通过检查 document.fonts 对象的 size 和 ready 属性来确定字体的加载状态。

示例代码：

if (document.fonts.size === 0) {
  console.log('No fonts have been loaded yet');
} else {
  console.log('Fonts have already been loaded');
}

上述代码在字体未加载时输出 "No fonts have been loaded yet"，在字体加载完成后输出 "Fonts have already been loaded"。

使用备用字体

在字体尚未加载完成时，为了避免出现页面显示问题，我们可以使用备用字体代替。CSS 提供了 font-display 属性来控制字体的加载和渲染行为。

示例代码：

@font-face {
  font-family: 'Example Font';
  src: url('example-font.woff2') format('woff2');
  font-display: fallback;
}

上述代码中，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