Shopify CLS 由字体引起怎么修

现象#

页面打开时标题先显示系统字体，随后跳一下换成品牌字体，CLS 0.2 以上，移动端尤其明显。

原因#

• 自定义字体只声明了 @font-face，没有 font-display，浏览器长时间不显示文字后突然替换
• 字体文件放在主题 assets 里但未预加载，首屏文字等到 CSS 加载完才开始换字体
• 回退字体与品牌字体的字宽差异大，换字体时行高变化推动布局
• 多个 section 各自引入字体，重复请求并触发多次重排

处理步骤#

1. 在 @font-face 中加 font-display: swap 或 optional，后者完全不产生位移
2. 用 {{ 'font.woff2' | asset_url | preload_tag: as: 'font', crossorigin: 'anonymous' }} 预加载首屏字重
3. 用 size-adjust 与 ascent-override 校准回退字体，让替换前后行高一致
4. 把字体声明收敛到一处，删除 section 内重复的 @font-face
5. 用 Lighthouse 的「避免布局偏移」列出具体偏移元素，确认不再是标题块

验收标准#

CLS 降到 0.1 以下；弱网下刷新页面，标题不出现明显的字体替换跳动。