根本原因是动画触发图层分离导致亚像素抗锯齿退化为灰度抗锯齿，使文字发虚或毛边；-webkit-font-smoothing仅是临时补救，治标不治本。
直接原因不是font-smoothing失效，而是动画触发图层分离后，浏览器被迫降级文字抗锯齿策略——此时设-webkit-font-smoothing只是“打补丁”，治标不治本。
动画让文字从 subpixel AA 退化为 grayscale AA
当元素被transform、opacity或will-change提升为独立合成图层时，WebKit 和 Blink 引擎会关闭亚像素抗锯齿（subpixel AA），改用灰度抗锯齿（grayscale AA）。后者在 macOS 上表现为文字发虚、笔画变细、加粗感丢失；在 Windows 上则更明显地出现毛边和色边。这不是字体没加载或font-weight写错，而是渲染通道变了。
- 典型现象：
button:hover { transform: scale(1.05); }后按钮文字突然“变细”或“加粗失效”，动完又恢复 - Safari 对此最敏感，尤其在嵌套
position: relative容器中，连后续兄弟元素的文字都会间歇性闪烁 -
-webkit-font-smoothing: subpixel-antialiased在 macOS WebKit 下有效，但 Windows 和 Android WebView 中完全忽略
为什么-webkit-font-smoothing: antialiased有时反而更糊
这个值强制禁用 subpixel AA，但没解决图层分离问题，等于主动放弃最清晰的渲染路径。它只适合已处于 grayscale 模式下的兜底场景，比如你无法修改动画结构、只能微调样式时临时使用。
-
antialiased→ 灰度抗锯齿 + 更宽松的字形插值 → 小字号下易模糊、连笔字易粘连 -
subpixel-antialiased→ 强制走 subpixel 通路 → 仅 macOS Safari/Chrome 有效，Windows 下 fallback 到 normal - 别设
text-rendering: optimizeLegibility配合动画，它会启用连字和激进字距，放大渲染误差
真正该动的是动画作用对象，不是文字本身
核心原则：让文字始终留在主渲染图层，别让它被 GPU 单独拎走。哪怕动画再炫，只要文字没被直接变形、透明度变化或滤镜处理，就能保住 subpixel 渲染。
- 把
transform写在父容器上，例如.card:hover .card-title改成.card:hover { transform: translateY(-2px); }，标题元素只响应 class 变化 - 避免对
、这类纯文本元素设will-change: transform，应加在它的包装div上 - 必须缩放文字？优先用
font-size+transition: font-size，性能稍低但渲染质量稳 - 要用
opacity动画？给父容器加isolation: isolate，防止它意外创建新图层影响子文字
最常被忽略的一点：动画结束后的“恢复帧”仍可能残留图层状态。如果用户快速反复 hover，文字可能卡在 grayscale 模式里不回来——这时候加 backface-visibility: hidden 或强制重绘（如 transform: translateZ(0)）反而会加重问题，不如让动画自然收尾后由浏览器自动合并图层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
