Shopify 字体用 font-display swap 还是跳动

现象#

加上 font_display: 'swap' 后标题仍下移 12px，CLS 从 0.02 涨到 0.18，滚动前就能看到文字整体挪位。

原因#

• swap 只保证先用 fallback 显示，字体换入那一刻仍按新字体的度量重排整行
• fallback 用默认 sans-serif，x-height 与字宽和品牌字体差得远，替换时行宽变化明显
• 标题的 line-height 用无单位数值，字体换入后每行高度跟着变
• 标题字号用了 clamp()，换字体后断行位置改变，块高度再变一次

处理步骤#

1. 在 Rendering 面板打开 Layout Shift Regions 录一次首屏，确认抖的是标题还是正文
2. 给 @font-face 补 size-adjust、ascent-override，把 fallback 度量调到接近
3. 标题 line-height 固定为 px 或百分比，不要留 auto 或纯数字
4. 首屏先用系统字体栈，document.fonts.ready 后再加 class 切换
5. 用 WebPageTest 的 Filmstrip 对比第 1 帧与换字体帧的基线位置

验收标准#

CLS 回落到 0.05 以下，Filmstrip 里标题基线在换字体前后不再位移。