如何向Gatsby添加自定义字体

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

先决条件

如果您想继续阅读本文，您将需要：

  • Node.js 安装在本地，可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行
  • 本教程将期望您从现有的 Gatsby 项目构建。 在如何设置你的第一个盖茨比网站中创建的盖茨比满足了这个要求。

本教程已使用 Node v15.13.0、npm v7.8.0、gatsby v3.2.1 和 react v17.0.1 进行了验证。

Typography,js 部分已使用 gatsby-plugin-typography v3.2.0、react-typography v0.16.19、typography v0.16.19 和 typography-theme-lawton v0.16.19 进行了验证。 Fontsource 部分已使用 @fontsource/rubik v4.2.2 进行了验证。

使用 Typography.js

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

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 文件并添加以下新代码行：

盖茨比-config.js 

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

gatsby-plugin-typography 支持两个选项：

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

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

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

src/utils/typography.js 

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 项目中的新字体。

注意： 如果你的启动器包含样式，它们可能会覆盖gatsby-plugin-typography设置的样式。


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

考虑一个 Lawton 主题的例子，它使用 Raleway 作为标题，使用 Libre Baskerville 作为正文。

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

npm install typography-theme-lawton

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

src/utils/typography.js 

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

const typography = new Typography(theme);

export default typography;

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

src/utils/typography.js 

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 托管的字体相比，自托管具有更快的加载时间的典型优势。

注：之前，本文推荐字体。 该库已被弃用。


考虑一个使用 Rubik 字体的例子。

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

npm install @fontsource/rubik

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

盖茨比浏览器.js 

require("@fontsource/rubik");

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

src/styles/main.css 

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

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

盖茨比浏览器.js 

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

或样式组件：

src/components/layout.js 

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 字体加载 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 插件的帮助下获取目录：

盖茨比-config.js 

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

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

src/fonts/fonts.css 

@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 应用平台 。

取自“https://cainiaojiaocheng.com/index.php?title=如何向Gatsby添加自定义字体&oldid=26622”
Powered by MediaWiki