在 React 应用程序中渲染之前加载字体答案

【问题标题】：Loading fonts before rendering in React app在 React 应用程序中渲染之前加载字体
【发布时间】：2023-02-24 14:20:39
【问题描述】：

我在我的 React 应用程序中使用 TTF 字体文件。在慢速网络上，首先呈现包含文本的页面 UI（使用默认字体），此时正在调用 TTF 字体，然后在一段时间后解决，并更新 UI 中的字体。如何加载字体以便在第一次渲染时，UI 将显示预期的字体。

这就是我在typography.scss 文件中加载字体的方式

@font-face {
    font-family: "BodyVBoldXS";
    src: url(./fonts/Saira-SemiBold.ttf);
}

typography.scss 文件的路径：src/styles/typography.scss

TTF文件的路径：样式/字体/Saira-SemBold.ttf

请注意：我无法从 CDN 加载字体，我必须将其包含在我的代码中。

【问题讨论】：

【解决方案1】：

我遇到了类似的问题。我的解决方案是在我的 App.css 文件中额外加载字体，以便它们在每个组件的 jsx 之前呈现。似乎奏效了。

【讨论】：