Shopify 字体加载慢导致文字闪烁怎么优化

现象#

首屏文字先用系统字体渲染，几百毫秒后跳到品牌字体，出现明显闪烁（FOUT），偶尔整段文字短暂不可见。

原因#

• 字体文件放在主题 assets 里直接 @font-face 引入，没有预加载
• 使用了 font-display: block，文字在字体下载完成前不显示
• 同时加载 4 个以上字重，移动端带宽被占满

处理步骤#

1. 只保留实际用到的 2-3 个字重，删除斜体等未使用变体
2. 对首屏字体加 <link rel="preload" as="font" crossorigin>
3. 设置 font-display: swap，并给回退字体配置相近的 size-adjust 减少跳动
4. 中文字体优先使用系统字体栈，或按需子集化，避免加载几 MB 的全量字库

验收标准#

首屏文字不再闪烁或长时间空白；LCP 不因字体额外增加 300ms 以上。