css - 使用 Create React App JS 包预加载字体

Question

尽管遵循了在我的 React 应用程序中自托管自定义字体的推荐方法（使用 Create React App 引导，未弹出），但我在加载时遇到了无样式文本的闪烁（下面的 GIF 变慢了）：

我的文件夹结构是：

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

// index.scss

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

我努力了：

• 将字体移动到public带有rel="preload"标签的文件夹中index.html，但是当包含在规则中时index.scss，src文件夹中的 无法解析模块。@font-face
• 在组件中添加加载状态，在加载组件时使用useEffect钩子设置加载状态，但似乎只有在效果发生后才加载字体，所以问题仍然存在。

是否有推荐的方法来加载停止 FOUT 的字体，或者延迟组件渲染直到字体完全加载？

请注意：

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

标签： cssreactjssasscreate-react-apppreload