React/Vite项目中preload预加载字体仍延迟，隐藏元素法为何生效？

问题背景 #

我的React/Vite项目里，部分半粗体文本总是比常规字体晚几秒显示。我用Font Squirrel生成了不同字重的字体文件，每次点击加载组件时，半粗体字体都会慢一步出现。查资料得知，浏览器只会加载当前页面实际需要的字体，常规字体因为提前被页面其他元素使用，早就加载完成，半粗体则因未提前触发加载，延迟感特别明显。

尝试的预加载方案（效果甚微） #

我先在index.html里用preload标签强制预加载半粗体字体：

<link rel="preload" href="/src/assets/barlow/barlow-semibold-webfont.woff2" as="font" type="font/woff2" crossorigin />

DevTools网络面板显示字体确实已提前下载，但半粗体文本还是有延迟——只是比之前稍快一点，根本没解决问题。

有效解决方案：隐藏元素触发字体加载 #

后来我在App.jsx里加了一个移出屏幕的隐藏元素，明确指定使用半粗体字体：

<p
  id="preload-fonts"
  style={{
    position: 'absolute',
    left: '-100vw',
    opacity: '0',
    fontFamily: 'barlowsemibold',
  }}
>
  占位文本（确保浏览器识别到字体需求）
</p>

这么一改，半粗体文本的延迟问题直接解决了。

原因解析 #

1. preload只完成“下载”，没做“激活” #

preload标签的核心作用是让浏览器提前下载资源，但它不会触发字体的解析和激活流程。浏览器下载完预加载的字体后，只会把它存在缓存里，直到页面出现实际使用该字体的元素，才会去解析字体、将其加入可用字体列表——哪怕缓存里有文件，解析激活仍需要时间，所以还是会有延迟。

2. 隐藏元素触发了完整的字体加载流程 #

当页面存在明确指定fontFamily: 'barlowsemibold'的元素时，浏览器在页面初始化阶段就会触发完整流程：识别字体需求 → 下载（无缓存时）→ 解析 → 激活字体。等到后续加载组件里的半粗体文本出现时，字体已处于激活状态，直接就能应用，自然没有延迟。

一句话总结 #

preload是“先把文件下下来放着”，而隐藏元素是“告诉浏览器这个字体现在就要用，赶紧处理好”——后者让字体在页面加载初期就完成了所有准备工作，后续使用时直接就能生效。

内容的提问来源于stack exchange，提问作者vatsal chauhan