在前端开发中，如何使用 Google Fonts 来美化网站的字体呢？这里介绍一个非常方便的 npm 包 google-fonts-complete，它可以帮助你快速地将 Google Fonts 字体添加到你的项目中。
1. 安装
使用 npm 安装 google-fonts-complete：
--- ------- ---------------------
2. 引入
在你的 HTML 文件中引入 google-fonts-complete 提供的 CDN 地址：
----- ---------------- -----------------------------------------------------------------------------------------------
或者，在你的 JavaScript 文件中引入 google-fonts-complete：
------ ------------------------
3. 使用
在 CSS 中指定你想要使用的 Google Fonts 字体，例如：
---- - ------------ ----- ------ ----------- -
其中，'Open Sans' 是 Google Fonts 字体库中的一种字体。
你还可以使用 ES6 模板字符串来定义多个字体：
----- ----- - - ----- ------ -------- -- ------------------------------ - ------
4. 高级用法
google-fonts-complete 还提供了一些高级用法，例如：
4.1 支持自定义字体子集
默认情况下，google-fonts-complete 会加载所有字体字符。如果你只需要部分字符，可以通过添加查询参数 subset 来指定字体子集，例如：
----- ---------------- ------------------------------------------------------------------------------------------------------------
这里的 subset=latin 表示只加载拉丁字母字符。
4.2 支持自定义字体权重
默认情况下，google-fonts-complete 会下载所有字体权重。如果你只需要部分权重，可以通过添加查询参数 weights 来指定字体权重，例如：
----- ---------------- ---------------------------------------------------------------------------------------------------------------
这里的 weights=400,700 表示只下载正常和粗体两种权重的字体。
4.3 支持按需加载字体
默认情况下，google-fonts-complete 会在页面加载时同时下载所有字体资源。然而，在某些情况下，你可能只需要在特定的页面中使用一部分字体，这时你可以使用 loadFont 函数来按需加载字体资源，例如：
------ - -------- - ---- ------------------------ -------------- ------ -----
这里的 loadFont('Open Sans', 400) 表示只下载 Open Sans 字体的正常权重（400）。
5. 结语
本文介绍了 npm 包 google-fonts-complete 的使用方法，并提供了多个实用的示例。希望这篇文章能够帮助你更好地使用 Google Fonts 来美化你的网站。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/46589