头部使用@font-face与<link preload>的区别及性能影响咨询

核心作用差异 #

• @font-face 内联定义：这是给浏览器「备案」自定义字体——告诉它有这么一款字体，当页面元素用到对应的font-family时，就去指定地址下载字体文件。它本身不会触发下载，只有当页面里的元素实际应用了该字体族时，浏览器才会发起字体请求。把它放在头部<style>里，能让浏览器尽早解析到字体规则，但下载动作还是要等「字体被使用」这个触发条件。

• ：这是强制浏览器提前启动字体下载，完全跳过「等待字体被使用」的触发逻辑。它的核心目的是把字体下载的时机往前挪，避免浏览器等到解析到字体使用场景才开始请求，以此减少FOIT（不可见文本闪烁）或FOUT（无样式文本闪烁）的发生，提升页面加载的视觉流畅度。

Shopify Dawn 主题双方式搭配的合理性及性能影响 #

Dawn 主题同时用这两种方式，是典型的互补优化，确实能提升性能：

1. 内联@font-face确保浏览器不用等外部样式表加载完成，就能提前知道字体的定义规则，避免因为外部样式表的加载延迟，导致字体规则解析滞后；
2. preload标签主动触发字体下载，不用等浏览器发现有元素用到该字体才开始请求。当页面渲染到需要用该字体的首屏元素时，字体大概率已经下载完成或接近完成，能大幅减少文本加载的延迟，让用户更快看到排版正常的内容。

单独用其中一种都有局限：

• 只放@font-face：浏览器要先解析样式、识别到字体使用场景，才会启动下载，中间存在时间差，首屏字体加载可能滞后；
• 只加preload：虽然提前下载了字体，但没有@font-face定义字体族与文件的关联，浏览器无法把下载好的字体应用到元素上，等于做了无用功。

关于你的直觉判断 #

你认为「当@font-face规则位于需先下载的外部样式表中时，使用标签更合理」，这个判断完全正确。如果@font-face放在外部样式表里，浏览器必须先下载、解析完这个外部文件，才能知道字体的存在并触发下载。而preload可以直接绕过这个环节，提前发起字体请求，避免外部样式表的加载延迟拖慢字体获取的时机，进一步优化首屏性能。

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