如何在 React.js 中使用 Google 字体？

Question

我用 React.js 和 webpack 建立了一个网站。

我想在网页中使用 _谷歌字体_，所以我把链接放在了部分。

谷歌字体

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

并设置 CSS

 body{
    font-family: 'Bungee Inline', cursive;
}

但是，它不起作用。

我怎么解决这个问题？

原文由 Kevin Hsiao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在某种主要或首次加载 CSS 文件中，只需执行以下操作：

 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

您不需要包含任何类型的 @font-face 等。您从 Google 的 API 返回的响应已经准备就绪，可以让您像平常一样使用字体系列。

然后在你的主要 React 应用程序 JavaScript 中，在顶部放置如下内容：

 import './assets/css/fonts.css';

我所做的实际上是一个 app.css 导入了一个 fonts.css 和一些字体导入。只是为了组织（现在我知道我所有的字体在哪里）。要记住的重要一点是首先导入字体。

请记住，您导入 React 应用程序的任何组件都应在样式导入之后导入。特别是如果这些组件也导入了它们自己的样式。这样您就可以确定样式的顺序。这就是为什么最好在主文件的顶部导入字体（不要忘记检查最终捆绑的 CSS 文件以仔细检查是否遇到问题）。

在加载字体等时，您可以通过一些选项来提高 Google Font API 的效率。请参阅官方文档： Get Started with the Google Fonts API

编辑，注意：如果您正在处理“离线”应用程序，那么您可能确实需要下载字体并通过 Webpack 加载。

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议