Google Fonts 是一款免费的 Web 字体服务，它使用 npm 包管理器可以非常方便地在前端项目中使用。在本篇文章中，我们将介绍如何使用 npm 包 google-fonts 在你的项目中引入 Google Fonts。
安装 Google Fonts
在开始之前，我们需要安装 google-fonts 包。打开终端，输入以下命令：
npm install google-fonts
引入 Google Fonts
在安装完 google-fonts 后，打开你的 CSS 文件，引入 Google Fonts 即可。
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
以上链接中，family 参数指定你想要引入的字体名称。
按需引入 Google Fonts
在某些情况下，我们可能只需要使用某一种字体的某一种样式。在这种情况下，我们可以通过配置 google-fonts 选项，仅仅引入所需的字体样式。
-- -------------------- ---- ------- ----- ----------- - ------------------------ ------------- --------- --------- -- ----- ---- ---- ----- -- ------ - ----- ------ ------- ------ ------------ ------------ - -- -------- -- - ------------------ ----- -- ------ ---展开代码
以上代码中，我们仅仅声明使用 Open Sans 的 400，700，400italic 和 700italic 四种粗体和斜体样式字体。
在 HTML 页面中使用 Google Fonts
引入 Google Fonts 后，我们可以在 HTML 页面中使用这些字体了。
<h1 style="font-family: 'Open Sans', sans-serif;">Hello World</h1>
以上代码中，我们使用 Open Sans 字体渲染了一个标题。
总结
通过 npm 包管理器引入 Google Fonts，可以在前端项目中方便引用这些优秀字体资源，提高我们制作网页时的美感度。同时，按需引入字体样式仅仅装载我们实际使用到的字体，可以优化我们的页面加载速度。
更多详细信息，请参考 google-fonts npm 包说明文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/182278
