1
字体族变化
检测当备用字体代替主字体渲染时，或 font-family 声明发生变化时。
45 测试用例
排版
排版是可读性的基础。即使字体粗细或行高的微小变化也会影响用户对内容的感知。Delta-QA 监控每个排版属性以确保精确渲染。
我们检测什么
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 对比截图，高亮标题之间的粗细差异——更粗的标题在叠加图中清晰可见。