盖茨比乔布斯_盖茨比中的自定义字体

盖茨比乔布斯

Choosing the right font can add great value to a site and enhance the user experience. The right font-loading strategy, however, can be somewhat of a challenge. That’s why Gatsby provides several developer-friendly solutions for all of our font-loading needs.

选择正确的字体可以为网站增加价值，并改善用户体验。但是，正确的字体加载策略可能会有些挑战。因此，盖茨比(Gatsby)为我们的所有字体加载需求提供了几种对开发人员友好的解决方案。

We’ll take a look at 3 different approaches for loading fonts onto a project. To get started, you’ll need a working Gatsby project. So if you haven’t already, you can get started with Gatsby by following along the Gatsby First Steps article.

我们将介绍3种将字体加载到项目中的不同方法。首先，您需要一个正在运行的Gatsby项目。因此，如果您还没有开始，请按照《盖茨比第一步》一文开始使用盖茨比。

Typography.js (Typography.js)

Most of us have probably used Google Fonts for its ease of use and wide range of available typefaces. Typography.js turns that up to 11 and provides a wide range of typographic themes.

我们大多数人可能已经使用了Google字体，因为它易于使用且可用字体丰富。 Typography.js最多可将其转换为11个，并提供了广泛的印刷主题。

安装 (Install)

All we need to install is the typography package.

我们需要安装的是typography软件包。

$ npm install --save typography

组态 (Configuration)

Then, we can add the plugin to our gatsby-config.js.

然后，我们可以将插件添加到我们的gatsby-config.js 。

gatsby-config.js

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

Options:

选项：

pathToConfigModule: this is the config path.
pathToConfigModule：这是配置路径。
omitGoogleFont: a helper function to request Google fonts from standard CDN. If set to false, you can use an alternative CDN config.
omitGoogleFont：一个帮助程序函数，用于从标准CDN请求Google字体。如果设置为false，则可以使用备用CDN配置。

Next, we need to set up a typography.js configuration file where we’ll choose our web fonts or theme, as well as any additional base styling.

接下来，我们需要设置一个typography.js配置文件，在其中我们将选择我们的Web字体或主题以及任何其他基本样式。

Let’s add Playfair Display, Roboto, and some base font sizing.

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

src/utils/typography.js

src / utils / typography.js

import Typography from "typography";

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

// Insert styles directly into the <head>
typography.injectStyles();

export default typography;

Or, we could use one of the predefined themes.

或者，我们可以使用预定义的主题之一。

src/utils/typography.js

src / utils / typography.js

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

const typography = new Typography(theme);

export default typography;

And we can even override any of the theme’s styles.

而且，我们甚至可以覆盖主题的任何样式。

src/utils/typography.js

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;

进一步配置 (Further Configuration)

There are plenty of themes you can use and several configuration options to get the right setup for your site. Take a look at the linked resources to get a more in-depth look at what you can do with Typography.js.

您可以使用许多主题以及几个配置选项来为您的站点进行正确的设置。查看链接的资源，以更深入地了解Typography.js可以做什么。

Typefaces.js (Typefaces.js)

Loading fonts from an external CDN comes with some drawbacks in performance, so if we’re looking to shed some of the extra load time, we can use Typefaces. This plugin takes a more familiar approach.

从外部CDN加载字体在性能方面存在一些缺点，因此，如果我们希望节省一些额外的加载时间，则可以使用Typefaces 。该插件采用了更熟悉的方法。

安装 (Install)

Say we want to use Rubik for our site. Instead of adding a link in the head or an import in a stylesheet, we can npm install/yarn add the font we need.

假设我们要在我们的网站上使用Rubik 。无需在标题中添加link或在样式表中添加import ，我们可以npm install/yarn add所需的字体。

$ npm install typeface-rubik

组态 (Configuration)

Now we’ll require the font in our gatsby-browser.js, where we interact with the client-side of Gatsby.

现在，我们需要在gatsby-browser.js使用字体，在这里我们可以与Gatsby的客户端进行交互。

gatsby-browser.js

require("typeface-rubik");

And we can go ahead and call the font in our stylesheet/styled-components like we normally would.

我们可以像往常一样在样式表/样式化组件中调用字体。

src/styles/main.css

src / styles / main.css

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

src/components/layout.js

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;

自托管 (Self-Hosted)

Although using Typefaces is self-hosting our fonts, it does not provide us with much control over our setup. Maybe we want to take some more advantage of the CSS Font Loading API. Or even try out some of the font loading strategies from Zach Leatherman. Whichever the case may be, we can always add fonts to a Gatsby site like we normally would with any website.

尽管使用Typefaces可以自托管我们的字体，但是它不能为我们提供对设置的太多控制。也许我们想更多地利用CSS Font Loading API 。甚至尝试Zach Leatherman提供的一些字体加载策略。无论哪种情况，我们都可以像通常在任何网站上一样向Gatsby网站添加字体。

安装 (Install)

Keeping with the Rubik example, we can create a directory for our font files and stylesheet.

与Rubik示例相同，我们可以为字体文件和样式表创建目录。

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

组态 (Configuration)

We can then source the directory with the help of the gatsby-source-filesystem plugin.

然后，我们可以在gatsby-source-filesystem插件的帮助下gatsby-source-filesystem目录。

gatsby-config.js

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

And in our stylesheet, we can use the @font-face rule to load our fonts.

在样式表中，我们可以使用@font-face规则加载字体。

src/fonts/fonts.css

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;
}

And now we can call our fonts in the same way we did in the Typefaces example via a stylesheet or styled-component.

现在，我们可以通过样式表或样式组件，以与在Typefaces示例中相同的方式来调用字体。

结论 (Conclusion)

There are a plethora of different ways we could optimize our font-loading strategy, but this should be enough to get you started. I highly recommend you read through the linked resources and do a little research into some of the font-loading best practices. Finding the right solution for your needs can significantly improve performance and user experience.

我们可以通过多种方式来优化字体加载策略，但这足以让您入门。我强烈建议您通读链接的资源，并对一些字体加载最佳实践进行一些研究。找到适合您需求的解决方案可以显着改善性能和用户体验。