在 Create React App 中使用预加载

Question

我正在尝试preload在使用create-react-app.

我将此标签添加到我的index.html 文件中：

<link rel="preload" href="%PUBLIC_URL%/myFontFile.woff2" as="font" type="font/woff2">

但我的问题是我不知道如何从我的CSS（在url中@font-face）引用这个字体文件。CSS 文件不在该public文件夹中。

一个不同的选择可能是将字体文件放入/src但我不知道标签中我的字体文件的文件名是什么preload，因为当有新版本时它会被分配一个随机 ID 并且 webpack 构建项目。

我知道我可以将 CSS 与字体文件一起放入public文件夹中，但这意味着该 CSS 不会被捆绑。

preload使用create-react-app（不弹出）并将带有声明的 CSS 与@font-face其他 CSS 文件捆绑在一起的最佳方法是什么？

或者，如果这实际上不可能：我可以通过哪些替代方案获得类似的行为来预加载字体加载？

Answer 1

您应该首先查看CSS 字体优化技巧中的这篇文章，但我相信在使用 create React 应用程序时，您的字体应该位于您的公共目录中。我将我的与LoadCSS 库一起使用

<link rel="preload" href="./style/Atlan-Bold.woff" as="font" type="font/woff2" onload="this.onload=null;this.rel='stylesheet'" crossorigin>

在此调用之后，我的 css 文件立即引用了该字体，如下所示：

<link rel="preload" href="./style/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="./style/style.css"></noscript>

在这个CSS中我引用了

@font-face {
  font-family: 'Atlan Bold';
  src: url('Atlan-Bold.woff') format('woff')
}

另外，这里有一些在 Chrome 中使用的信息：使用“preload”链接指令在 Chrome 中预加载字体