文字发虚的根本原因是transform: scale()触发gpu合成层导致抗锯齿降级，解决方法是将缩放应用到父容器、避免小数像素位移、删除触发图层提升的属性。
文字发虚不是字体问题，是图层被拎走了
缩放动画中文字边缘发虚、发灰、有彩色毛边，根本原因不是字体没选好，也不是DPR太高，而是浏览器把用了transform: scale()的元素单独拎进一个GPU合成层——文字脱离主渲染流后，被迫从亚像素抗锯齿降级为灰度抗锯齿，甚至完全关闭抗锯齿。这时候加-webkit-font-smoothing基本无效，因为控制权已经不在CSS手里。
验证方法很简单：打开Chrome DevTools → 切到Layers面板，把鼠标悬停在模糊的文字上。如果它被框进红色图层，说明你正在跟GPU光栅化硬刚，所有字体平滑设置都已失效。
优先把scale写在父容器上，别动文字本身
最直接有效的做法，是让文字始终和背景共处同一图层。不要对<h2></h2>、<p></p>这类纯文本元素直接加transform: scale()，而是把动画逻辑上移到它的父容器（比如.card或.wrapper）。
- ✅ 正确：
.card { transform: scale(1.1); }，内部文字保持静态 - ❌ 错误：
.card p { transform: scale(1.1); }，文字被强制隔离 - 如果必须局部缩放某段文字，用
font-size过渡替代transform: scale()——它不触发图层提升，抗锯齿全程可控
删掉所有偷偷触发图层提升的属性
有些属性看着 harmless，实则一加就让文字进红框。哪怕只差0.01，也会破坏渲染一致性：
- 删掉文字及其任意父级上的
backface-visibility: hidden - 删掉
opacity: 0.99这类“几乎不透明”的值，要么opacity: 1，要么干脆不用 - 避免对文字元素设
will-change: transform——它会提前创建合成层，比动画开始还早 - 检查
filter是否被继承，哪怕只是filter: blur(0)也足以触发新图层
小数像素位移是隐形杀手，必须手动取整
transform: translateX(50%)在199px宽的容器里算出99.5px，这种半像素偏移会让浏览器在光栅化阶段强行插值，结果就是边缘糊成一片。这不是bug，是渲染管线的必然行为。
解决方式不是调抗锯齿，而是绕过亚像素：
- 改用
calc(50% - 0.5px)，让结果落在整数像素上 - 或直接写死整数值：
transform: translateX(100px) - 对
scale()动画，优先选有理数：如scale(2)、scale(0.5)安全；scale(1.1)这类应避免 - 移动端尤其要注意：iOS Safari对sub-pixel translate更敏感，哪怕0.1px偏差也可能引发明显锯齿
真正难处理的从来不是单个属性，而是scale + border-radius + overflow: hidden + 高DPR多层叠加后的复合渲染异常——得逐项关掉再开，靠Layers面板定位，而不是凭经验瞎换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
