Css 使用CreateReact应用程序JS包预加载字体

尽管在我的React应用程序（使用Create React应用程序引导，未截取）中遵循了自托管自定义字体的步骤，但在加载时我仍会遇到未设置样式的文本闪烁（下面的GIF速度减慢）：

我的文件夹结构是：

- src
-- fonts
--- custom-font.woff
- index.scss

我试过：

• 将字体移动到

  index.html

  中带有

  rel=“preload”

  标记的

  public

  文件夹，但是

  src

  文件夹中的

  index.scss

  无法解析包含在

  @font-face

  at规则中的模块
• 在组件中添加加载状态，使用

  useffect

  钩子在安装组件时设置加载状态，但字体似乎仅在效果发生后加载，因此问题仍然存在

是否有一种建议的方法来加载停止FOUT的字体，或延迟组件渲染直到字体完全加载

请注意:

• 我对谷歌字体或其他CDN不感兴趣，只对自托管字体感兴趣
• 我不想弹射

---

请检查，可能是help@HardikGodhani这两个链接都不相关，或者已经尝试（根据问题）尝试进入您的字体面

font-display:swap。更多关于
// index.scss

@font-face {
  font-family: "CustomFont";
  src: url("./fonts/custom-font.woff") format("woff");
}