gatsby - 使用 gatsby 谷歌字体插件时仍然会出现无样式文本

Question

我在 gatsby 中的主要字体是在 index.scss 文件夹中定义的，就像这样在 body 标记中。

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

对于我想使用谷歌字体的标题，我尝试使用这些插件进行预加载：

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

Answer 1

你的.title课是正确的。

但是，由于您将字体显示为swap( font-display: swap)，它首先使用默认排版加载字体，直到它被您的 CSS 呈现和覆盖。这样可以避免 CSS 渲染阻塞您的网页加载，提高您的网页性能，但如果您真的想避免闪烁，只需添加display: block选项对象：

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