简介
@skotty/webfonts 是一个方便前端开发者使用谷歌字体系统的 npm 包，它提供了一种简单的方法来加载、应用并管理 Google Fonts 的定制字体。这篇文章将深入介绍等等使用
安装
在终端中输入以下命令即可安装 @skotty/webfonts：
npm install @skotty/webfonts --save
使用
导入 @skotty/webfonts：
import WebFonts from "skotty-webfonts";
在 constructor 中实例化 WebFonts：
this.webFonts = new WebFonts({
fonts: [{
family: "Roboto",
weights: [400, 700]
}]
});在 componentDidMount 中把 WebFonts 应用到 document.body 上：
componentDidMount() {
this.webFonts.applyFontStyles(document.body);
}这里我们配置的是 Roboto 字体，在 weights 中可以指定字体的粗细程度。
高级使用
加载字体
在上面的例子中，我们使用的是默认的 CDN 来加载字体。但是，@skotty/webfonts 还提供了一种更高级的方法来加载字体，可以控制加载方式以及加载状态。
这里首先定义一个字体对象：
-- -------------------- ---- -------
----- ---- - -
------- ----- ------
-------- ----- ------- -----
------- --
--------------- ------
---
-------- --------- --------------
------------ -
------------ ---
--
----------- -
-------- ------------ ----------- -- -------------------- ----------- ------------
------- ------------ ----------- -- --------------------- ----------- ------------
--------- ------------ ----------- -- -------------------- ----------- ------------
------- ------------ ----------- -- -------------------- ----------- ------------
------ ------------ ------ -- ----------------------- ----------- ------
-
--这里介绍一下一些比较重要的配置项：
- family：字体名称
- weights：字体粗细程度
- subsets：字体字形
- descriptors：可以针对每个字体设置自定义 JSON 对象，这些描述符将与选项一起传递到 CSS 规则中
- fontEvents：可以定义一个或多个回调函数来监听字体加载事件
然后在 WebFonts 实例化时传入字体数组：
this.webFonts = new WebFonts({
fonts: [font],
customCssUrl: "www.example.com/custom.css"
});如果你想使用自定义的 css 样式，可以将 css 的链接放到 customCssUrl 中。
管理字体
@skotty/webfonts 还提供了一种方法来管理你的字体。你可以通过定义字体的类别来把它们组合在一起，为它们指定不同的 css 样式。
以下是一个例子：
-- -------------------- ---- -------
----- -------------- - -
------ --
------- ----- ------
-------- ----- ------- -----
--------- ------------
-- -
------- ---------
-------- ----- -----
--------- -------
-- -
------- -------------
-------- ----- -----
--------- ------------
-- -
------- --------- ---------
-------- -------- -----
--------- -------
---
---------- -----------
--------------- ---------
--------------- --
--我们定义了四个不同的字体，并且将它们分为两个不同的类别：sans-serif 和 serif。然后，我们可以把它们应用到指定的 HTML 元素上：
const sansSerif = this.webFonts.getFontFamily("sans-serif");
const serif = this.webFonts.getFontFamily("serif");
const sansSerifHeadings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
sansSerif.applyFontStyles(sansSerifHeadings);
const serifParagraphs = document.querySelectorAll("p");
serif.applyFontStyles(serifParagraphs);我们使用 getFontFamily 函数获取了不同类别的字体，然后使用 applyFontStyles 方法应用在对应的元素上。
示例代码
这里是完整的示例代码：
-- -------------------- ---- -------
------ -------- ---- -------------------
----- --- ------- --------------- -
------------- -
--------
------------- - --- ----------
------ --
------- ---------
-------- ----- ----
--
---
-
------------------- -
---------------------------------------------
-
-------- -
------ -
-----
-----------
---------
------
--
-
-结论
@skotty/webfonts 是一个非常有用的工具，可以帮助快速加载和使用 Google Fonts，管理字体也变得更加灵活。结合以上介绍中提供的案例和示例代码，相信你已经可以在自己的项目中成功使用这个 npm 包了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057b1381e8991b448eb79a