在 React 项目中测试不同的字体

Question

问题

如何在React项目中快速测试不同的字体？

概览

我正在学习如何将 React/Gatsby 与此 template 结合使用。在此示例中，站点使用 .sass 文件进行样式设置，我看到 slider.sass 文件中引用了 font-family: "slick"，而 reset.sass 文件中有此条目：

body
  font-family: Roboto, Helvetica, Arial, sans-serif
  font-size: 16px

期望的结果

理想情况下，我希望在这个项目和其他项目中尽快尝试使用许多不同的字体组合。

例如，我想尝试将所有字体更改为 this for titles/headers and this 之类的字体。

我看了什么？

我见过 this from Gatsby founder kyleamathews，但我猜它会与本示例中的当前 sass 配置冲突。

我还看到变量可以与 sass 一起使用，并且可以潜在地用于测试此项目中的不同字体，但我不确定具体如何使用。感谢您提供任何帮助，说明我应该如何处理这个问题。

Answer 1

让我以警告开始我的回答：

Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.

Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic @font-face declarations, or Kyle Matthew's typefaces packages, for example.

现在，您基本上想要做的是在客户端导入字体，以便在不重建站点的情况下轻松试用它们。

1。获取 link 以在客户端嵌入您的字体

首先，您需要从字体托管 CDN（在您的例子中，来自 Google 字体）中嵌入 link。它看起来像这样：

https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat

2。在您的 Gatsby 网站上嵌入字体

要在您的 Gatsby 网站上嵌入 link，您有两种选择：

使用<link>

您可以将字体作为 external client-side package. You would typically either customize html.js 添加到您的 Gatsby 应用程序，或使用 react-helmet.

在您的情况下，I see here react-helmet 已经内置到您正在使用的启动器中，因此您需要像这样更新 layout.js：
```
<HelmetDatoCms
  favicon={data.datoCmsSite.faviconMetaTags}
  seo={data.datoCmsHome.seoMetaTags}
>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
```
查看 README of gatsby-source-datocms 以了解有关 HelmetDatoCms 组件的更多信息
使用@import

您可以在 CSS（或 SASS）中导入远程字体：
```
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
```
这已经在您的启动器中使用，导入在 reset.sass 中。您只需将 URL 更新为包含您想要试用的字体即可。

对于你的情况，我会推荐第二个选项。您只需要编辑一个文件，这将使测试多种字体更快。

3。使用 CSS

中的字体

第三，无论您选择 <link> 还是 @import 选项，您都需要更新 CSS 以使用您导入的字体。正如您在问题中已经提到的，this is where is happens.

你会想要这样的东西：

body {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Great Vibes', cursive;
}

在 React 项目中测试不同的字体

Testing different fonts in a React project

typography

sass

reactjs

gatsby

1。获取 link 以在客户端嵌入您的字体

2。在您的 Gatsby 网站上嵌入字体

3。使用 CSS