预加载字体

通常，字体要么从第三方来源下载，例如Google Fonts，要么从存储在构建文件夹中的文件下载。

运行构建后，我们得到一个静态文件夹，其中包含两个文件夹：js和css。
如果我们下载了一些字体文件，它们将位于第三个文件夹中：media。

我们可以手动下载它们，或者下载一个 npm 包，比如@fontsource，里面有文件。

然后浏览器将按照自己的速度加载这些字体，但这可能会导致默认浏览器字体和所需字体的 UI 闪烁。

为了获得更好的 UI 感觉，我们必须告诉浏览器预加载它们。

为了实现这一点，我们需要添加一个预加载给定内容的link标签：href

<link
rel="preload"
href="https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2"
as="font"
crossOrigin="anonymous"
/>

但是我怎么知道里面要放什么呢href？

为此，我们需要打开开发工具中的网络选项卡，查看浏览器加载的内容，然后复制它:)

要找到字体请求，请选择顶部的字体过滤器。

如果我们使用，React我们可以将此link标签添加到index.html（就像在 中一样Vanilla JS）或我们的 内部App.tsx，但要从 访问该head标签，App.tsx我们需要借助库react-helmet-async。
它的作用是将其子项插入到head标签中。
当然，为了避免在我们的App.tsx组件中“弄脏”更多代码，我们可以将其包装在一个单独的组件中 -<PreloadFonts />

例如，这个导航栏将在一瞬间看起来像这样（gif 速度变慢以便更好地查看变化）。

但在预加载字体后，我们不会再看到闪烁：

同样的过程适用于来自库或我们下载的字体文件，唯一的区别是将href是相对的，如下所示：

<link
rel="preload"
href="/static/media/libre-franklin-latin-400-normal.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>

现在我的问题是，如果出现明显的 UI 闪烁，为什么不自动预加载所有字体？！