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

Question

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

Answer 1

你的 .title class 是正确的。

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

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

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

Still getting flash of unstyled text when using gatsby google font plugins

gatsby

google-font-api

gatsby-plugin