字体需要花费很短的时间才能加载有没有办法解决？ CSS：字体显示 Google字体显示属性其他资源

问题描述

我在我的React项目中使用的是Google字体，每当我打开网站时，都会有一个非常明显的瞬间，即我使用该字体的文本最初加载的是看似不同的字体，然后更改为正确的字体字体。

这是怎么回事？以及如何防止这种情况发生？

在<link href="https://fonts.googleapis.com/css2family=Bebas+Neue&display=swap" rel="stylesheet" /> 中加载字体

src/index.css

将字体添加到.bg-header { font-family: "Bebas Neue",sans-serif; color: darkorange; text-decoration: underline; position: absolute; bottom: 10%; left: 5%; font-size: 75px; } 中的类中

<h5 className="bg-header">{getHeader()}</h5>

react组件中的html标签

{{1}}

解决方法

CSS：字体显示

如果您真的不想交换字体，可以使用：

T(n) = Theta(T)

或者可能更人性化的方式是：

T(n) = Theta(c*T(n) + d)

但是，这可能会损害您在搜索引擎中的排名，因此您应该了解为什么默认情况下将字体设置为交换字体。 g(n)=c*T(n) + d属性的默认设置为T(n)。

您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display处了解CSS body { font-display: block; } 属性。

Google字体显示属性

在Google字体导入中，您实际上可以在字体URL中指定字体显示设置：

body { font-display: fallback; }

请注意网址的font-display部分。

其他资源

这些文章也将非常有帮助：

• https://css-tricks.com/font-display-masses/
• https://developers.google.com/web/updates/2016/02/font-display

,

当您嵌入字体时，仍必须在浏览器中至少一次加载该字体，以使其正确显示在您的网站中，这完全取决于您的浏览器。

在速度更快的设备上不会发生此问题，但是如果您担心此问题，可以暂停网站渲染，直到完全确定为止。

缓存字体也可以解决此问题，但是，如果字体需要花费一些时间来加载，则最终并没有什么区别，这取决于您的浏览器，因此我不建议隐藏它，因为字体会变大这个问题几乎没有好处。

与Google Font API一起的是WebFont Loader，它是一个JavaScript库，旨在提供许多事件挂钩，使您可以对加载进行很多控制。参见here

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Bebas Neue']
    }
  });
</script>

您还应该考虑通过子集减小字体大小，但这不是必需的，因为您将可能使用大多数字符，否则应该看到this

,

我们可以使用“ Preload”资源提示来告诉浏览器，我们希望我们的字体文件立即开始下载，而不是在解析CSS之后开始。这有助于更快地加载字体。

大多数主流浏览器都支持预加载和其他资源提示（Firefox也正在开发中以添加此提示）。将其添加到您的HTML中将如下所示：

<link rel="preload" as="font" type="font/woff2" 
  href="<FONT LOCATION>" crossorigin>

Machmetrics