简介
选择正确的字体可以为网站增加巨大的价值，并增强用户体验。然而，正确的字体加载策略在某种程度上可能是一个挑战。这就是为什么Gatsby为您的所有字体加载需求提供了几个开发人员友好的解决方案。
在本文中，将向您介绍将字体加载到项目中的三种不同方法：TypograPhy.js、Fontsource和手动管理自托管文件。
前提条件
如果您想继续阅读本文，您将需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment
- 本教程预期您将从现有的Gatsby项目进行构建。在How to Set Up Your First Gatsby Website]中创建的Gatsby Start满足了这一要求。
本教程已通过Node v15.13.0、npm v7.8.0、gatsby v3.2.1和react v17.0.1验证。
使用gatsby-plugin-typograPhyv3.2.0、action-typograPhyv0.16.19、typography‘v0.16.19和typograph-heme-Lawv0.16.19验证了排版，js部分。使用@fontsource/rubik`v4.2.2验证了Fontsource部分。
使用Typography.js
Typography.js是一个工具包，用于为您的项目加载和配置Web字体。
gatsby-plugin-typography‘还需要包括typography’和`action-typography‘的对等依赖关系。
打开您的终端窗口，导航到您的项目目录，然后运行以下命令：
1npm install typography react-typography gatsby-plugin-typography
<$>[备注]
注意： 在修订时，与最新版本的Reaction、gatsby-plugin-typography和action-typograPhy存在依赖树冲突。
可以使用--Legacy-Peer-Deps标志来绕过此错误。
<$>
接下来，使用代码编辑器打开gatsby-config.js文件，并添加以下新代码行：
1[label gatsby-config.js]
2module.exports = {
3 // ...
4 plugins: [
5 // ...
6 {
7 resolve: "gatsby-plugin-typography",
8 options: {
9 pathToConfigModule: "src/utils/typography.js"
10 }
11 }
12 ]
13};
gatsby-plugin-typograPhy支持两个选项：
pathToConfigModule：这是配置路径。omitGoogleFont：向标准CDN请求Google字体的helper函数。如果设置为true，则可以使用替代的CDN配置。
接下来，您需要一个pathToConfigModule选项中指定的typograPhy.js配置文件。此文件是您设置Web字体或主题以及任何其他基本样式的位置。
让我们添加Playfair Display、Roboto和一些基本字体大小。
1[label src/utils/typography.js]
2import Typography from "typography";
3
4const typography = new Typography({
5 baseFontSize: "18px",
6 baseLineHeight: 1.45,
7 googleFonts: [
8 {
9 name: "Playfair Display",
10 styles: ["800"],
11 },
12 {
13 name: "Roboto",
14 styles: ["400"]
15 }
16 ],
17 headerFontFamily: ["Playfair Display", "serif"],
18 bodyFontFamily: ["Roboto", "sans-serif"]
19});
20
21typography.injectStyles();
22
23export default typography;
保存更改并查看Gatsby项目中的新字体。
<$>[注]
注意： 如果您的starter包含样式，它们可能会覆盖gatsby-plugin-typography设置的样式。
<$>
Js还支持预定义的主题。
举一个Lawton主题的例子，标题使用Raleway‘，正文使用Libre Baskerville`。
打开您的终端窗口并运行以下命令：
1npm install typography-theme-lawton
以下是使用预定义主题的示例：
1[label src/utils/typography.js]
2import Typography from "typography";
3import theme from "typography-theme-lawton";
4
5const typography = new Typography(theme);
6
7export default typography;
以下是使用overrideThemeStyles覆盖预定义主题的示例：
1[label src/utils/typography.js]
2import Typography from "typography";
3import theme from "typography-theme-lawton";
4
5theme.overrideThemeStyles = () => ({
6 a: {
7 color: "black",
8 textDecoration: "none",
9 borderBottom: "2px solid gold"
10 },
11
12 "a:hover": {
13 color: "black",
14 textDecoration: "none",
15 borderBottom: "2px solid gold"
16 }
17});
18
19const typography = new Typography(theme);
20
21export default typography;
您可以使用许多themes和[几个配置options](https://github.com/KyleAMathews/typography.js api)]来为您的站点进行正确的设置。
现在，您的Gatsby项目支持TypograPhy.js。
使用Fontsource
字体源是一个用于自托管开源字体的工具包。与CDN托管的字体相比，自托管的字体具有加载速度更快的典型优势。
<$>[备注] 注： 此前，本文推荐Typefaces.自那以后，该库已被弃用。 <$>
考虑一个使用Rubik字体的示例。
打开您的终端窗口并运行以下命令：
1npm install @fontsource/rubik
接下来，需要gatsby-browser.js文件中的字体，您可以在该文件中与Gatsby的客户端进行交互。
1[label gatsby-browser.js]
2require("@fontsource/rubik");
然后您可以在样式表中调用该字体：
1[label src/styles/main.css]
2body {
3 font: 400 18px Rubik, sans-serif;
4}
<$>[备注]
注意： 使用全局样式需要在gatsby-browser.js中添加一条导入行：
1[label gatsby-browser.js]
2import "./src/styles/main.css"
<$>
或样式化组件：
1[label src/components/layout.js]
2import { createGlobalStyle } from 'styled-components';
3
4const GlobalStyles = createGlobalStyle`
5 body {
6 font: 400 18px Rubik, sans-serif;
7 }
8`
9
10const Layout = ({ children, location }) => (
11 // ...
12 <GlobalStyles />
13 <Main>{children}</Main>
14 // ...
15);
16
17export default Layout;
现在，您的Gatsby项目支持Fontsource。
手动管理自托管文件
Fontsource是一个自托管解决方案，并提供您需要的文件。但是，在某些情况下，您可能需要对设置进行更精细的控制。也许你想更多地利用CSS字体加载API。或者甚至尝试一些来自Zach Leatherman的字体加载策略。无论是什么情况，你都可以像往常一样为Gatsby网站添加字体。
与前面的Rubik示例一样，您可以为字体文件和样式表创建一个目录：
1|-- /static
2 |-- /fonts
3 |-- Rubik-Regular.woff
4 |-- Rubik-Regular.woff2
5 |-- Rubik-Italic.woff
6 |-- Rubik-Italic.woff2
7 |-- Rubik-Bold.woff
8 |-- Rubik-Bold.woff2
9 |-- fonts.css
然后，您可以在gatsby-source-filesystem插件的帮助下对目录进行源处理：
1[label gatsby-config.js]
2module.exports = {
3 // ...
4 plugins: [
5 // ...
6 {
7 resolve: "gatsby-source-filesystem",
8 options: {
9 name: "fonts",
10 path: `${__dirname}/static/fonts/`
11 }
12 }
13 ]
14};
在样式表中，您可以使用@font-face规则加载字体：
1[label src/fonts/fonts.css]
2@font-face {
3 font-family: Rubik;
4 font-weight: 400;
5 font-style: normal;
6 src: url("Rubik.woff2") format("woff2"), url("Rubik.woff") format("woff");
7 font-display: swap;
8}
9
10@font-face {
11 font-family: Rubik;
12 font-weight: 400;
13 font-style: italic;
14 src: url("Rubik-Italic.woff2") format("woff2"), url("Rubik-Italic.woff") format("woff");
15 font-display: swap;
16}
17
18@font-face {
19 font-family: Rubik;
20 font-weight: 700;
21 font-style: normal;
22 src: url("Rubik-Bold.woff2") format("woff2"), url("Rubik-Bold.woff") format("woff");
23 font-display: swap;
24}
现在，您可以像在前面的Fontsource示例中一样调用您的字体--通过样式表或样式组件。
总结
在本文中，向您介绍了将字体加载到项目中的三种不同方法：TypograPhy.js、Fontsource和手动管理自托管文件。
找到适合您需求的解决方案可以显著提高性能和用户体验。