Question

我正在尝试将preload用于使用create-react-app引导的项目中的字体。

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

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

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

另一个选项可能是将字体文件放入/src但我不知道我的字体文件的文件名在preload标记中是什么，因为它被分配了一个随机ID什么时候有它的新版本＆amp; webpack构建项目。

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

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

或者如果这不是真的可能：我的替代方案是什么，我可以获得类似的行为来预加载我的字体加载？

Answer 1

查看这篇文章进行字体优化（https://css-tricks.com/three-techniques-performant-custom-font-usage/)-但我相信你的字体必须在你的公共目录中才能使用create react app。我使用我的库和LoadCSS {{3} }）

<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中使用的信息：https://github.com/filamentgroup/loadCSS

Answer 2

如果只是关于字体，您可以通过将字体嵌入到带有 base64 的代码中来立即使用 css 预加载它们

您可以使用此服务或类似服务生成 base64

https://amio.github.io/embedded-google-fonts/ 或https://transfonter.org/

然后将其嵌入到 css 中，例如：

@font-face {
  font-family: 'Atlan Bold';
  src: url('data:application/font-woff2;charset=utf-8;base64,d09GMgA....') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

这将完全消除额外的字体请求和渲染故障

使用Preload和Create React App

2 个答案: