如何在 React js 中预加载自定义字体？答案

【问题标题】：How to preload custom font face in react js?如何在 React js 中预加载自定义字体？
【发布时间】：2021-06-18 20:17:24
【问题描述】：

我使用的是 otf 字体，在部署的站点中加载需要 819 毫秒。我们如何预加载字体以便尽早加载字体。

/src/index.css 中的 index.scss

@font-face {
  font-family: 'Pro';
  font-weight: 400;
  font-display: fallback;
  src: url('./Fonts/Pro/Pro_Regular.otf');
  unicode-range: 'U+000-5FF';
}

字体放置在 /src/Fonts/Pro/Pro_Regular.otf 文件夹中。

【问题讨论】：

标签： html css reactjs fonts

【解决方案1】：

你可以像这样预加载你的字体

<link rel="preload" href="./Fonts/Pro/Pro_Regular.otf" as="font" crossorigin="anonymous" />

另外，你应该使用一些 CDN 并预加载你的字体

【讨论】：