Gatsby 当使用盖茨比谷歌字体插件时，仍然会看到未格式化的文本

我在盖茨比中的主字体是在index.scss文件夹中定义的，就像在body标记中定义的那样

body {
  font-family: "Trebuchet MS", "Helvetica";
  font-size: 16px;
}

对于标题，我想使用google字体，并尝试使用以下插件预加载：

 {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Sacramento`],
        display: "swap",
      },
    },
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Sacramento`,
            variants: [`400`],
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["Sacramento"],
        },
      },
    },

在css中，字体已定义，但仍在生产中使用未设置样式的文本，而不是在本地开发中使用

.title {
  font-family: "Sacramento", cursive;
}

---

您的

.title

类是正确的

但是，由于您将字体显示为

swap

（），因此它首先使用默认排版加载字体，直到它被CSS呈现和覆盖。这避免了CSS渲染阻止web加载，提高了web性能，但如果您确实想避免闪烁，只需在选项对象中添加

display:block

：

{
  resolve: `gatsby-plugin-google-fonts`,
  options: {
    fonts: [
      `Sacramento`
    ],
    display: 'block'
  }
}