前言
在前端开发中，字体的渲染及其耗时是我们非常关心的一个问题。一旦外部字体应用较多，往往需要在页面中使用 font-face 或 @import 等方式引入字体文件。这种方式会使页面加载时间变长，并且往往需要等待字体加载完毕后再展示页面内容。为了避免用户在加载页面时面临空白的等待，可以使用 onfontready npm 包帮助我们提升用户体验。
什么是 onfontready？
onfontready 是一款小巧的 npm 包，它可以帮助我们检测页面中的自定义字体是否已全部加载完成。当页面内的字体加载完成后，onfontready 会触发一个回调函数，以此来告知我们外部字体已准备就绪。onfontready 通过 JavaScript 来检查已加载的字体，而不是依赖于浏览器加载字体的事件。
安装
使用 npm 安装：
npm install --save onfontready
使用
引入 onfontready，可以使用 import 和 require 两种方式：
// 1. 使用 import import onfontready from 'onfontready'; // 2. 使用 require const onfontready = require('onfontready');示例代码：
-- -------------------- ---- ------- -- -------------- --- ------- - ----------------------------------- ------------- ------- ---- ----- --------- ---- ---- ----------- ------- ----- -- -- -- - --------------- ----- ---- ---------- -- ------------- ----------- -- ------------------------ - ------- ---- ----- ---
有趣的额外特性
onfontready 还有一些额外的特性。以下是我们感兴趣的几个：
- User-agent 字体加载检测：大多数浏览器在找不到用户定义的自定义字体时都会自动回归到其内置字体。onfontready 能够检测到这些字体的存在，并在 CSS 字体表现上设置
onfontready-useragent类名。 - SetTimeouts 和 interval 监控：监控文本的宽度和高度不但是 Web 开发中一个不算稀奇的问题，但如果字体设置得失当，则它变成了一个非常新奇的问题。
- 预加载字体文件：如果字体必须在后台下载，而您又不希望在使用时出现闪烁现象，则可以使用 onfontready 来预加载字体。
总结
onfontready 是一款方便快捷的 npm 包，可以帮助我们优化页面的字体加载及展示，提升用户体验。它的应用场景不仅限于前端开发。此外，onfontready 还具有一些有趣的特性，可以为我们带来意想不到的收益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fb03d1de16d83a67356