介绍

选择正确的字体可以为网站增加巨大价值并增强用户体验。然而，正确的字体加载策略可能有点挑战。这就是为什么 Gatsby 为您的所有字体加载需求提供了几种对开发人员友好的解决方案。

在本文中，您将了解将字体加载到项目中的三种不同方法：Typography.js、Fontsource 和手动管理自托管文件。

先决条件

如果你想跟随这篇文章，你需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 并创建本地开发环境来完成
• 本教程希望您从现有的 Gatsby 项目进行构建。在如何设置您的第一个 Gatsby 网站中创建的 Gatsby 开始满足此要求。

本教程已通过 Node v15.13.0、npmv7.8.0、gatsbyv3.2.1 和reactv17.0.1 验证。

Typography,js 部分已通过gatsby-plugin-typographyv3.2.0、react-typographyv0.16.19、typographyv0.16.19 和typography-theme-lawtonv0.16.19 验证。Fontsource 部分已通过@fontsource/rubikv4.2.2验证。

使用 Typography.js

Typography.js是一个工具包，用于为您的项目加载和配置 Web 字体。

gatsby-plugin-typography将还需要包括同行的依赖typography和react-typography。

打开您的终端窗口并导航到您的项目目录并运行以下命令：

npm install typography react-typography gatsby-plugin-typography

注意：在修改的时候，与最新版本的React、gatsby-plugin-typography、 和存在依赖树冲突react-typography。

可以使用该--legacy-peer-deps标志来解决此错误。

接下来，gatsby-config.js使用代码编辑器打开文件并添加以下新代码行：

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-typography",
      options: {
        pathToConfigModule: "src/utils/typography.js"
      }
    }
  ]
};

gatsby-plugin-typography 支持两种选择：

• pathToConfigModule: 这是配置路径。
• omitGoogleFont：从标准 CDN 请求 Google 字体的辅助函数。如果设置为true，您可以使用替代 CDN 配置。

接下来，您将需要一个typography.js在pathToConfigModule选项中指定的配置文件。您可以在此文件中设置 Web 字体或主题以及任何其他基本样式。

让我们添加Playfair Display、Roboto和一些基本字体大小。

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.45,
  googleFonts: [
    {
      name: "Playfair Display",
      styles: ["800"],
    },
    {
      name: "Roboto",
      styles: ["400"]
    }
  ],
  headerFontFamily: ["Playfair Display", "serif"],
  bodyFontFamily: ["Roboto", "sans-serif"]
});

typography.injectStyles();

export default typography;

保存更改并查看 Gatsby 项目中的新字体。

注意：如果您的 starter 包含样式，它们可能会覆盖由gatsby-plugin-typography.

Typography.js 还支持预定义的主题。

考虑一个Raleway用于标题和Libre Baskerville正文的 Lawton 主题示例。

打开终端窗口并运行以下命令：

npm install typography-theme-lawton

以下是使用预定义主题的示例：

import Typography from "typography";
import theme from "typography-theme-lawton";

const typography = new Typography(theme);

export default typography;

以下是使用以下内容覆盖预定义主题的示例overrideThemeStyles：

import Typography from "typography";
import theme from "typography-theme-lawton";

theme.overrideThemeStyles = () => ({
  a: {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  },

  "a:hover": {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  }
});

const typography = new Typography(theme);

export default typography;

有很多主题，你可以使用和几个配置选项以获得正确的设置为您的网站。

现在您的 Gatsby 项目支持 Typography.js。

使用字体源

Fontsource是一个用于自托管开源字体的工具包。与 CDN 托管的字体相比，自托管具有加载时间更快的典型优势。

注意：之前，本文推荐使用Typefaces。此库已被弃用。

考虑使用Rubik字体的示例。

打开终端窗口并运行以下命令：

npm install @fontsource/rubik

接下来，需要gatsby-browser.js文件中的字体，您可以在其中与 Gatsby 的客户端进行交互。

require("@fontsource/rubik");

然后你可以在你的样式表中调用字体：

body {
  font: 400 18px Rubik, sans-serif;
}

注意：使用全局样式将需要您将导入行添加到gatsby-browser.js：

import "./src/styles/main.css"

或样式组件：

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    font: 400 18px Rubik, sans-serif;
  }
`

const Layout = ({ children, location }) => (
  // ...
  <GlobalStyles />
  <Main>{children}</Main>
  // ...
);

export default Layout;

现在您的 Gatsby 项目支持 Fontsource。

手动管理自托管文件

Fontsource 是一个自托管解决方案，并提供您需要的文件。但是，在某些情况下，您可能希望更好地控制设置。也许您想更多地利用CSS Font Loading API。或者甚至尝试一下Zach Leatherman 的一些字体加载策略。无论是哪种情况，您始终可以像通常在任何网站上一样向 Gatsby 网站添加字体。

与前面的Rubik示例保持一致，您可以为字体文件和样式表创建一个目录：

|-- /static
    |-- /fonts
        |-- Rubik-Regular.woff
        |-- Rubik-Regular.woff2
        |-- Rubik-Italic.woff
        |-- Rubik-Italic.woff2
        |-- Rubik-Bold.woff
        |-- Rubik-Bold.woff2
        |-- fonts.css

然后，您可以在gatsby-source-filesystem插件的帮助下获取目录：

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "fonts",
        path: `${__dirname}/static/fonts/`
      }
    }
  ]
};

在您的样式表中，您可以使用@font-face规则加载字体：

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: normal;
  src: url("Rubik.woff2") format("woff2"), url("Rubik.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: italic;
  src: url("Rubik-Italic.woff2") format("woff2"), url("Rubik-Italic.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 700;
  font-style: normal;
  src: url("Rubik-Bold.woff2") format("woff2"), url("Rubik-Bold.woff") format("woff");
  font-display: swap;
}

现在，您可以使用与之前的 Fontsource 示例相同的方式调用您的字体 – 通过样式表或样式组件。

结论

在本文中，您了解了将字体加载到项目中的三种不同方法：Typography.js、Fontsource 和手动管理自托管文件。

找到满足您需求的正确解决方案可以显着提高性能和用户体验。

继续学习如何将 Gatsby 应用程序部署到 DigitalOcean 应用程序平台。