Gatsby 中的字体 - Javascript

在 Gatsby 中，我们可以很容易地管理网站的字体，让网站的页面看起来更美观。本文将介绍如何在 Gatsby 中使用字体。

安装字体库

首先，我们需要从 Google Fonts 或者其他字体库中选择一个或多个字体，并下载对应的字体文件。在 Gatsby 中，我们可以使用 gatsby-plugin-web-font-loader 插件来加载字体。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-web-font-loader`,
      options: {
        google: {
          families: ['Roboto', 'Open Sans'],
        },
      },
    },
  ],
};

在这个例子中，我们使用 google 配置来加载来自 Google Fonts 中 Roboto 和 Open Sans 字体。其他常见的字体库也可以用类似的方式加载。

使用字体

当字体加载完毕后，我们需要在页面中使用它们。在 Gatsby 中，我们可以使用 Typography.js 库方便地定义全局字体样式：

// src/utils/typography.js
import Typography from 'typography'

const typography = new Typography({
  baseFontSize: '16px',
  googleFonts: [
    {
      name: 'Roboto',
      styles: ['400', '700'],
    },
    {
      name: 'Open Sans',
      styles: ['400', '700'],
    },
  ],
  headerFontFamily: ['Open Sans', 'sans-serif'],
  bodyFontFamily: ['Roboto', 'sans-serif'],
})

export default typography

在上面的例子中，我们定义了 headerFontFamily 和 bodyFontFamily 分别为 Open Sans 和 Roboto 字体。其他的样式也可以按照自己的需求自由定义。

使用 Typography.js 也可直接在页面中进行全局使用：

// src/pages/index.js
import React from 'react';
import { Helmet } from 'react-helmet';
import typography from '../utils/typography';

typography.injectStyles();

export default function HomePage() {
  return (
    <>
      <Helmet>
        <title>Gatsby字体使用演示</title>
        <meta name="description" content="这是一个Gatsby字体使用的演示页面" />
      </Helmet>
      <h1>Hello, Gatsby!</h1>
      <p>
        这是我们自定义字体的文字!
      </p>
    </>
  );
}

总结

以上就是在 Gatsby 中使用字体的方法。我们可以使用 gatsby-plugin-web-font-loader 来加载字体，然后使用 Typography.js 进行全局样式定义，在页面中进行使用，从而达到美观的页面效果。