Shopify 字体 preload 后反而下载了两次

现象#

Network 里同一个 woff2 出现两条记录，一条 Initiator 是 preload，另一条来自 CSS，首屏标题仍晚了 800ms 才换字体。

原因#

• preload 不带 crossorigin 时以 no-cors 模式抓取，与 CSS 的 CORS 请求无法共用缓存
• 字体请求按 CORS 模式发起，preload 必须带 crossorigin 才能命中同一份缓存
• 预加载地址与实际 @font-face 里的 src: url() 不一致，版本参数对不上就等于两次
• 主题还额外 preconnect 了 cdn.shopify.com，而字体实际走的是店铺自己的域名

处理步骤#

1. 在 Network 按 woff2 过滤，看是否有两条同 URL 请求，比对 Initiator 列
2. 写成 font_url | preload_tag: as: 'font', crossorigin: 'anonymous'
3. 核对打印出的 href 与 @font-face 中的 url 完全一致，含 ?v= 版本串
4. 删除指向 cdn.shopify.com 的 preconnect，只保留字体真实来源域
5. 硬刷新后看 Initiator 列，只应剩 preload 一条

验收标准#

同一 woff2 只有一次请求，Initiator 显示 preload；字体下载起点早于样式表解析完成。