介绍
woff2-feature-test 是一个方便测试字体支持情况的 npm 包，它能够检测执行环境是否支持 WOFF2 字体格式，以及是否支持特定的字体特性。
该包是基于 FontFaceObserver 和 font-feature-support 这两个 npm 包开发的。
如果你在开发 Web 应用时需要使用自定义字体，而又需要确认选择的字体在执行环境中是否支持特定特性，那么 woff2-feature-test 将会是非常有用的工具。
安装
你可以通过 NPM 包管理器来安装 woff2-feature-test，只需要在你的项目根目录下输入以下命令：
npm install --save-dev woff2-feature-test
基本用法
检测 WOFF2 格式支持
在你的 JavaScript 代码中，导入 woff2-feature-test，接着创建一个新的 woff2FeatureTest 实例，并调用该对象的 supportsWoff2 方法来检测执行环境是否支持 WOFF2 格式。
-- -------------------- ---- ------- ------ ---------------- ---- --------------------- ----- --------- - --- ------------------- -- --------------------------- - ------------------ ------ -- ------------- - ---- - ------------------ ------ -- --- ------------- -
检测字体特定特性支持
woff2-feature-test 还支持检测字体是否支持特定的 CSS 字体属性，例如 font-variation-settings。你可以调用 woff2FeatureTest 实例的 supportsFontVariationSettings，来检测当前浏览器环境是否支持该特性。
const woff2Test = new Woff2FeatureTest();
if (woff2Test.supportsFontVariationSettings()) {
console.log('The specified font-variation-settings are supported!');
} else {
console.log('The specified font-variation-settings are NOT supported!');
}示例代码
以下是一个完整的代码示例，在此例中，我们先检查执行环境是否支持 WOFF2 格式，如果支持就动态加载该字体并检查是否支持 font-variation-settings。
-- -------------------- ---- -------
------ ---------------- ---- ---------------------
------ ---------------- ---- -------------------
----- --------- - --- -------------------
-- -- ----- ----
-- --------------------------- -
-- -------------------- -----------------------
----- ---- - --- ---------------------------------
-----------
-------- -- -
-- ------------------------------------------- -
---------------- --------- ----------------------- --- -------------
- ---- -
---------------- --------- ----------------------- --- --- -------------
-
--
--------- -- ----------------- ----- --- -- -----------
- ---- -
------------------ ------ -- --- -------------
-总结
woff2-feature-test 可以方便地帮助开发者测试当前环境是否支持 WOFF2 格式字体，并检测是否支持该字体上的特定特性。此工具对于使用自定义字体的 Web 应用开发非常有用。 如果你还未尝试，不妨下载安装一下，并在你的下一个项目中尝试使用吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3df