@font-face是否会阻塞渲染？字体加载与样式表加载机制问询

嘿，这个问题问到点子上了，毕竟字体加载的行为直接关系到页面的首屏体验，我来给你掰扯清楚：

1. @font-face 不会阻塞样式表的解析 #

不管你把@font-face放在样式表的哪个位置（哪怕是顶部），浏览器都不会等待字体文件加载完成后再去解析后续的CSS规则。它的处理逻辑是：

• 解析到@font-face规则时，立刻发起字体文件的异步请求
• 同时继续往下解析剩余的CSS代码，正常应用其他样式规则

简单说：样式表的加载和解析流程完全不受字体加载的影响，不会因为字体还没下载完就卡住样式应用。

2. 字体加载对文本渲染的影响（FOIT/FOUT） #

不过要注意：字体加载会影响文本内容的渲染，不同浏览器有不同的默认行为：

• 早期的浏览器（比如旧版Chrome、Safari）会触发「FOIT（Flash of Invisible Text）」：在自定义字体加载完成前，文本会保持空白，直到字体加载成功（或超时）才显示。这种情况看起来像是“阻塞了文本渲染”
• 现代浏览器（Chrome 60+、Firefox、Edge等）已经调整了策略：会短暂等待字体加载（通常是3秒左右），如果超时就先显示系统替代字体（也就是「FOUT（Flash of Unstyled Text）」），等自定义字体加载完成后再替换成目标字体

3. 如何主动控制字体渲染行为 #

如果你想完全掌控这个过程，可以用font-display属性在@font-face里配置：

• font-display: swap：直接显示系统替代字体，等自定义字体加载好立刻替换，彻底避免文本空白的情况，对用户体验最友好
• font-display: block：浏览器会短暂隐藏文本（默认约3秒），如果字体还没加载完才显示替代字体，是多数浏览器的默认行为
• font-display: optional：如果字体在极短时间内没加载完成，就一直使用替代字体，不再替换，适合非核心的装饰性文本

举个实际配置的例子：

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-font.woff2') format('woff2');
  font-display: swap; /* 优先保证文本可见 */
}

总结一下：@font-face本身不会阻塞样式表加载，也不会阻塞整体页面渲染，只是在默认情况下可能会暂时影响文本的显示状态，而这个行为是可以通过font-display完全控制的。

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