在前端开发中，使用 web 字体能够改善用户体验和页面排版，而 Google Fonts 提供了丰富的开源字体供设计师和开发者使用。而通过 npm 包 google-fonts-webpack-plugin，我们可以更加方便地在我们的项目中引入 Google Fonts。
1. 安装和配置
首先，在项目目录下使用 npm 安装 google-fonts-webpack-plugin：
npm install google-fonts-webpack-plugin --save-dev
在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ----------------- - --------------------------------------
-------------- - -
-------- -
--- -------------------
------ -
- ------- -------- --
- ------- ----- ------ --------- ------- ------ - -- ----- -------
-
--
-
-在配置文件中，我们实例化了 google-fonts-webpack-plugin，同时我们可以传递 fonts 属性，以对需要引入的字体进行定制。对于每个需要引入的字体，我们都默认传递的 family 项，描述了 Google Fonts 上该字体的名称。variants 项描述该字体的不同字重使用，这部分可以按照我们具体项目的需求按需添加。
2. 常见用法
引入多个字形
new GoogleFontsPlugin({
fonts: [
{ family: 'Roboto', variants: ['400', '700'] },
{ family: 'Open Sans', variants: ['400', '700'] }
]
})引入多个语言
new GoogleFontsPlugin({
fonts: [
{ family: 'Roboto', subsets: ['latin', 'cyrillic'] },
{ family: 'Open Sans', subsets: ['latin'] }
]
})引入多个字形及多个语言
new GoogleFontsPlugin({
fonts: [
{ family: 'Roboto', variants: ['400', '700'], subsets: ['latin', 'cyrillic'] },
{ family: 'Open Sans', subsets: ['latin'] }
]
})3. 示例代码
可以使用以下示例代码进行尝试：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- -------- ------ --- ---- ------------
-------
---- -
------------ --------- -----------
-
--- -- -
------------ ----- ------ -----------
------------ ----
-
-- -
---------- -----
-
-- -
---------- -----
-
--------
-------
------
---------- -----------
---------- ----- ------------
-------
-------以及 webpack 配置文件代码：
-- -------------------- ---- -------
----- ----------------- - --------------------------------------
-------------- - -
------ -----------
------- -
--------- ------------
----- --------- - -------
--
-------- -
--- -------------------
------ -
- ------- --------- --------- ------- ------ --
- ------- ----- ------ --------- ------- ------ -
-
--
-
--4. 总结
通过使用 npm 包 google-fonts-webpack-plugin，我们可以简化在前端项目中加入 Google Fonts 字体的流程。结合常见的用法，我们能够十分便捷地完成不同字体、字重、语言的选择工作，提升页面的品质和设计，同时也减小了我们的开发时间和难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd881e8991b448e678c