在开发前端页面过程中，经常需要使用自定义的字体样式，为了避免浏览器兼容性问题以及重复加载同一字体文件造成性能浪费，通常会使用 Google Fonts 等在线字体服务。但有时候，我们需要使用其他字体服务提供商或自己的字体文件，这时候 wofffontloader (npm install wofffontloader --save) 这个 npm 包就可以派上用场了。
wofffontloader 简介
wofffontloader 是一款轻量级的 npm 包，用于按需加载 .woff 字体文件，以提高页面性能表现。
该包基于 Font Face Observer 并作了优化。Font Face Observer 是一个小型的检测字体加载的 JavaScript 库，解决了一个常见的问题：当使用 Web Fonts 时，应该如何在没有 Flash 的情况下显示内容。
与 Font Face Observer 相同， wofffontloader 不兼容 IE9 及以下的浏览器，建议先进行检测兼容性再使用。
使用方法
安装 wofffontloader
打开终端（Terminal）或命令行界面，运行以下命令：
npm install wofffontloader --save
导入 wofffontloader
在需要按需加载字体的地方导入 wofffontloader。
import FontFaceObserver from 'fontfaceobserver'; import WoffFontLoader from 'wofffontloader';
添加字体文件信息
-- -------------------- ---- ------- ----- -------- - --- ------ ------ -- ---- ----- ------- - -------------------------------- -- ------ ----- ---- - --- --------------------------- -- ------- ----- ---------- - --- ----------------------- ---------- -- -- -------------- ------------- -- ----------- --------------- ------------ ------------------ ---------- -- - ----------------- ------ ---------------- ---
配置字体属性
在 CSS 中开启使用字体：
@font-face { font-family: 'My Custom Font'; font-style: normal; font-weight: 400; src: local('My Custom Font'), local('MyCustomFont'), url('https://example.com/font.woff') format('woff'); }
至此，wofffontloader 的使用已完成。现在我们可以使用此包按需加载字体以提高页面性能。
示例代码
以下是一个按需加载字体的示例代码：
-- -------------------- ---- -------
------ ---------------- ---- -------------------
------ -------------- ---- -----------------
----- -------- - --- ------ ------
----- ------- - --------------------------------
----- ---- - --- ---------------------------
----- ---------- - --- ----------------------- ----------
-------------
------------
------------------
---------- -- -
----------------- ------ ----------------
---
-- ---
---------- -
------------ --- ------ ------
----------- -------
------------ ----
---- --------- ------ ------- ----------------------
------------------------------------ ---------------
-
---- -
------------ --- ------ ------ -----------
-结论
通过 wofffontloader，我们可以方便地按需加载字体文件，提高页面性能表现。当满足需要使用其他字体服务提供商或自己的字体文件时，可以考虑使用此包进行字体加载，提高页面性能（前提是不需要兼容 IE9 及以下浏览器）。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3e1