React应用如何实现本地TTF字体预加载，确保首次渲染显示预期字体

你遇到的是字体加载时的「无样式文本闪烁（FOUT）」问题，以下是几种无需CDN、仅靠本地打包就能解决的方案：

方法1：用font-display控制字体渲染逻辑 #

修改你的@font-face规则，添加font-display: block，让浏览器在目标字体加载完成前暂时隐藏对应文本，避免先显示默认字体：

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

font-display: block的具体行为：

• 浏览器会先进入约3秒的阻塞期，期间若字体加载完成，直接显示目标字体；
• 若阻塞期内未加载完成，会临时显示 fallback 字体，直到目标字体加载完成后切换；
• 若字体加载失败，则永久使用 fallback 字体。

方法2：预加载字体资源 #

在项目的public/index.html中添加预加载标签，让浏览器优先加载字体，确保字体在页面渲染前就绪：

<link rel="preload" href="/fonts/Saira-SemiBold.ttf" as="font" type="font/ttf" crossorigin>

注意事项：

• href路径要对应打包后的字体位置，React打包后字体通常会放在build/fonts/目录下，所以用根路径/fonts/xxx.ttf；
• 必须添加crossorigin属性，即使是本地资源，浏览器对预加载的字体也会做跨域校验。

方法3：将字体转为Base64嵌入CSS #

把TTF字体转成Base64编码后直接写入CSS，这样字体和CSS一同加载，没有额外网络请求，页面渲染时字体已经可用：

1. 用本地工具或在线转换工具将Saira-SemiBold.ttf转为Base64编码；
2. 修改typography.scss：

@font-face {
    font-family: "BodyVBoldXS";
    src: url(data:font/ttf;base64,【替换为你的Base64编码内容】) format("truetype");
}

提示：此方法会增大CSS文件体积，适合体积较小的字体文件。

额外校验：确认字体路径正确性 #

你的typography.scss位于src/styles/，TTF文件在styles/fonts/（推测是src/styles/fonts/），确保相对路径正确，避免因404导致字体加载失败。也可以检查Webpack等打包工具的资源配置，确保字体文件被正确打包到输出目录。

内容的提问来源于stack exchange，提问作者Hari HKH