1
字体族变化
检测当备用字体代替主字体渲染时，或 font-family 声明发生变化时。
45 测试用例
排版
排版是承载界面所有内容的无形织物：标题、段落、按钮、表单标签、状态消息。一次排版回归很少导致崩溃，但会损害可读性、破坏视觉层级结构，并迫使您耗费数小时回溯用户事件报告。在业务型仪表盘上，标题换行成两行会导致下方所有指标位移；在产品页上，价格标签字重的变化可能让用户误以为存在一个并不存在的促销。常见原因为人所熟知：某次 npm 依赖更新破坏了 web 字体的导入、design system 中 --font-family 变量被修改、为改善某一页可读性而调整了全局 line-height、引入了 text-wrap balance 重新排列文字行，或仅仅是忘记为自定义字体族设置 fallback。不同 sprint 中 font-weight 在 600 与 700 之间的偏差仍是排版漂移的经典来源，尤其在没有严格规范的多人协作中。Delta-QA 将这些问题纳入比对逻辑：该工具不只是验证文字是否存在，而是逐像素比较渲染结果，检测字重、间距、行高或字体 fallback 的任何变化。基准截图作为稳定的排版 baseline，每次新执行都会突显文本偏移、标题换行、内容溢出以及版本之间的字重变化。这种方式让 QA 团队能够验证 design system 重构或框架升级，无需手动审阅每一个画面，从而保障视觉回归测试的全面覆盖。
我们检测什么
2
字重和样式
捕捉字重变化（400 vs 500、bold vs semibold）和样式变化（斜体、倾斜）。
3
字号和缩放
跟踪 px、rem、em 和视口单位的 font-size 变化，包括 clamp() 和流体排版。
4
行高和垂直韵律
监控可能破坏垂直韵律和页面整体流动的 line-height 调整。
5
字母和单词间距
检测影响文本密度和可读性的 letter-spacing 和 word-spacing 变化。
6
文本装饰和转换
识别下划线、删除线、text-transform（大写/小写）和 text-overflow 行为的修改。
实际场景
🎯
字体不再加载了
一位开发者执行 npm update，无意中破坏了 Inter 字体的导入。浏览器静默回退到 Arial。间距发生变化，某些标题换行，一个按钮溢出了容器——整个排版都微妙地偏移了。这次更新看起来很普通（只是更新依赖），没有进行视觉审查就合并了。Delta-QA 对比两个版本的截图，高亮每一处文字偏移、标题换行和因字体变化导致的溢出。
⚠️
行高破坏了产品卡片
一位开发者修改全局 line-height 来改善博客可读性。副作用：原本一行显示的产品标题变成了两行。卡片高度不再统一，网格变得参差不齐——一个"歪斜"的目录让人缺乏信任感。QA 检查了博客（被修改的页面），却没检查使用相同全局样式的目录页。Delta-QA 对比截图，高亮每张高度变化的卡片——网格中的错位一目了然。
💡
看不见的 font-weight 变化
设计师为标题指定了 font-weight semi-bold (600)。几个迭代下来，不同开发者有用 600 的，有用 700 的。结果：同一页面上某些标题明显比其他的粗。视觉层次变得混乱——一个章节标题无缘无故看起来比另一个更重要。设计师并未被告知这些渐进的改动。Delta-QA 对比截图，高亮标题之间的粗细差异——更粗的标题在叠加图中清晰可见。