html - 字体加载需要明显的瞬间。有没有办法解决？

Question

我在我的 react 元素中使用谷歌字体，每当我打开我的网站时，都会有一个非常明显的瞬间，使用该字体的文本最初加载了看似不同的字体，然后更改为正确的字体紧随其后的字体。

这里发生了什么？我该如何防止这种情况发生？

在public/index.html中加载字体

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

react组件中的html标签

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

Answer 1

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

大多数主流浏览器都支持预加载和其他资源提示(Firefox 目前也在开发中添加此功能)。将其添加到您的 HTML 中将如下所示:

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

Machmetrics