使用gatsby谷歌字体插件时仍然出现未样式化文本的闪烁

问题描述

我在gatsby中的主要字体是在body标签中的index.scss文件夹中定义的。

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（font-display: swap），因此它将首先使用默认字体加载字体，直到CSS渲染并覆盖它为止。这样可以避免CSS渲染阻止网页加载，从而提高网页性能，但是如果您真的想避免闪烁，只需在options对象中添加display: block：

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