实用教程
用 Claude Opus 5.5 排查产品页字体加载跳动
让 Claude Opus 5.5 根据加载证据和实际 CSS 判断字体切换问题，不要只给它一张加载完成的截图。比较同一标题在目标字体加载前后的状态。目标是在整个加载过程中保持产品卖点和主按钮可读，而不是隐藏文字，或一直缩小字号直到看不出问题。
让 Claude Opus 5.5 根据加载证据和实际 CSS 判断字体切换问题，不要只给它一张加载完成的截图。比较同一标题在目标字体加载前后的状态。目标是在整个加载过程中保持产品卖点和主按钮可读，而不是隐藏文字，或一直缩小字号直到看不出问题。
记录真正发生变化的过程
记录视口宽度、浏览器、语言、字体和字重，分别保存冷加载与缓存加载画面，再补字体请求时间及标题行数。一则开发者关于字体短暂显示错误的提问说明，缓存后的页面可能掩盖真正需要排查的体验。这是用户自述，不是本流程的性能测试。
web.dev 解释，网页字体与回退字体占用空间不同，可能推动周围内容。它提供了可调查的原因，但不能证明所有按钮位移都来自字体。
| 观察到的现象 | 优先排查 | 不要这样掩盖 |
|---|---|---|
| 字体到达后标题多一行 | 回退字体宽度及目标字重 | 删短已批准的产品卖点 |
| 文字未变，主图先移动 | 图片尺寸及预留空间 | 立即修改字体设置 |
| 只有一种语言被截断 | 字形覆盖及该语言换行 | 全站套用拉丁字体比例 |
| 冷加载有问题，缓存后稳定 | 请求发现时机及加载顺序 | 只汇报缓存结果 |
把截图问题变成可测量的问题
假设视口宽 360 像素，两侧各留 24 像素，内容宽度就是 312 像素。同一标题在回退字体下占两行，每行 40 像素；切换后变成三行。高度由 80 变成 120，增加 40 像素。这些是示例算术，不是 Opus 实测，也不是 CLS 分数。
接着检查主按钮是否也移动了 40 像素，是否还有其他元素发生变化。对比时保持原文、字重、宽度和浏览器不变。固定更高的标题容器可能缓解这一个例子的位移，却截断更长译文；应测试最长的批准文案，不能把英文截图当成所有语言的结论。
选择证据支持的最小修正
更接近目标字体的回退字体是一种选择。MDN 的 size-adjust 说明介绍了字体字形与度量缩放。不要给所有语言复制一个任意百分比。应在实际字重下测量目标字体和可用回退字体，再检查换行及基线对齐。
也可能只需修正错误请求的字重，或让关键字体更早被发现。提前加载所有字重会与产品图片争用资源。调整 `font-display` 是改变加载取舍，并不普遍保证品牌字体立刻出现且完全不跳动。记录具体改动及原因，交付可撤回的 CSS 补丁，而不是整页重设计。
根据证据提出补丁的提示词
检查这个产品页的字体加载变化。
输入：准确标题和语言、视口/留白、HTML/CSS、目标字体与字重、
可用回退字体、冷加载/缓存加载记录、请求时间、标题与按钮实测矩形。
区分观察事实与可能原因，不从单张图片推断时间过程。
先检查字体切换能否解释实测位移，再提出 CSS 改动。
保留原文、标题层级、对比度、可读字号和按钮行为。
提出最小补丁，说明取舍和撤回方法。
不编造 size-adjust 百分比，不宣称不同文字系统具有相同度量。
给出前后对比矩阵：冷加载、缓存加载、字体请求被阻止、
较长译文、窄屏和放大文字。
312 像素内容宽度及高度从 80 到 120 的例子是假设；
不能当作浏览器实测，也不能据此计算 CLS 分数。Opus 5.5 指南是模型参考资料。这是建议采用的审查流程，不是已经测试过的模型优劣结论。
验收不同加载状态
应用补丁后按相同条件重新记录。检查首次访问、再次访问和字体请求被阻止的情况；自定义字体始终不到达时，文字也必须可用。逐一测试支持的文字系统、较长标题及放大文字，关注按钮位置，而不只是标题是否好看。
理解页面实际排版后，再用 Panelly 创作台制作广告图，避免漂亮图片掩盖不稳定的页面。这里不代表已集成 Opus。落地页修订流程处理整体层级，品牌风格检查处理视觉一致性，两者都不能替代字体加载测试。
实际操作中的问题
**一张截图能证明修好了吗？** 不能。它无法展示变化过程，也无法展示永远加载不完的请求。应保留时间过程和测试条件。
**可以承诺 CLS 降低吗？** 只有用合适工具、在可比条件下测量后才可以。一次本地改善并不自动等于真实用户性能改善。
