Html 字体加载需要明显的瞬间。这有什么办法吗？

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

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

在

public/index.html中加载字体

<link
    href="https://fonts.googleapis.com/css2family=Bebas+Neue&display=swap"
    rel="stylesheet"
/>

react组件中的html标记

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

{getHeader（）}
嵌入字体时，必须在浏览器中至少加载一次字体，以便在网站中正确显示字体，这完全取决于浏览器

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

缓存字体也会阻止这个问题，但是，如果字体需要一些时间来加载，最终没有什么区别，这取决于你的浏览器，所以我不建议隐藏它，因为它会成为一个更大的问题，几乎没有好处

伴随Google Font API的是WebFont Loader，这是一个javascript库，旨在提供大量事件挂钩，让您能够控制加载。看


WebFont.load({
谷歌：{
家庭：['Bebas Neue']
}
});

你还应该考虑通过子设置缩小字体大小，但是这不是必须的，因为你可能会使用大部分的字符，否则你应该看到
我们可以使用“预加载”资源提示告诉浏览器，我们希望我们的字体文件立即开始下载，而不是在CSS被解析之后。这有助于更快地加载字体

大多数主流浏览器都支持预加载和其他资源提示（Firefox目前也在开发中添加这一功能）。将此项添加到HTML中的操作如下所示：

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



CSS：字体显示
如果您确实不想交换字体，可以使用：

body{
字体显示：块；
}

或者，更方便用户的方式可能是：

body{
字体显示：回退；
}

然而，这可能会损害你在搜索引擎中的排名，你应该仔细阅读为什么默认情况下字体设置为交换。
字体显示
属性的默认设置为
自动

您可以在此处阅读CSS
font display
属性

谷歌字体显示属性
在google字体导入中，您可以在字体URL中指定字体显示设置：


请注意URL的
display=swap
部分

其他资源
这些文章也将非常有用：




我尝试了一下，但字体没有加载。我查看了您提供的链接，示例中的href似乎指向一个本地文件。我认为它与谷歌api不兼容，听到这个消息我很难过。我会设法找到解决办法的。不用担心。谢谢你的帮助。如果我真的放弃并求助于下载字体，我将使用这种方法。@LukeLewis我感谢你的耐心。我希望我能为你做更多；）我试着摆弄url的显示部分来更改字体显示值。块似乎是最合适的，因为它在块期间绘制“不可见”的文本。然而，由于我的文本是带下划线的，有趣的是，它没有得到相同的“隐形”处理，并且在这个块期间被抽出。此外，我相信看不见的文本有更大的间距，导致在块期间可见更长的下划线。看起来我可能需要在本地保存字体。
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Bebas Neue']
    }
  });
</script>

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