在项目开发中，我们可能需要使用 Google Fonts 中的一些字体，为了便于模块化管理，我们可以使用 google-webfonts-webpack-plugin 这个 npm 包。
什么是 google-webfonts-webpack-plugin
google-webfonts-webpack-plugin 是一个 webpack 插件，它可以帮助我们将 Google Fonts 中的字体引入到我们的项目中，同时也可以生成对应的 CSS 文件。
安装
使用 npm 安装 google-webfonts-webpack-plugin
npm install google-webfonts-webpack-plugin --save-dev
引入
在 webpack 配置文件中引入插件
const GoogleFontsPlugin = require('google-webfonts-webpack-plugin');用法
在 webpack 配置文件中添加插件配置
-- -------------------- ---- -------
-------- -
--- -------------------
------ -
- ------- --------- --------- ------- ------------ --
- ------- ----- ------ --------- - ------ ------ ------ ----- - -
--
--------- ---------
------------ -----------
---
--配置项
fonts- 字体数组，每组字体包括字体名称以及需要使用的字体变体。fonts: [ { family: 'Roboto', variants: ['400', '700italic'] }, { family: 'Open Sans', variants: [ '300', '400', '600', '700' ] } ]fontsDir- CSS 中引用字体文件的位置。默认值为
'fonts/'，表示将字体文件放在项目的fonts目录下。cssFilename- 生成的 CSS 文件名。默认值为
'fonts.css'，表示将生成的 CSS 文件命名为fonts.css
示例代码
在 webpack 配置文件中添加如下配置：
-- -------------------- ---- -------
----- ----------------- - ------------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ -
- ------- --------- --------- ------- ------------ --
- ------- ----- ------ --------- - ------ ------ ------ ----- - -
--
--------- ---------
------------ -----------
---
--
-- ---
--添加 CSS 文件引用
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ---------------- -------------------
-------
------
---- ------------------- --------- ------------------- ------------
---- ------------------- ----- ------ ------------------- ------------
-------
-------在浏览器中打开页面，可看到不同字体的效果。
结语
通过使用 google-webfonts-webpack-plugin，我们可以方便地将 Google Fonts 中的字体引入到项目中，并简化了字体管理的步骤。同时，我们也可以根据具体项目需要添加字体，让页面更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f981e8991b448d3de8