字体发虚不是transform写错了，而是它将文字推至非整数像素位置触发gpu双线性插值；解决核心是确保translate、scale、rotate的最终值严格为整数像素，而非依赖translatez(0)或will-change硬加速。
直接说结论：字体发虚不是 transform 写错了，而是它把文字推到了非整数像素位置，触发了 GPU 双线性插值——解决核心是让 translate、scale、rotate 的最终计算值严格落在整数物理像素上，而不是靠 translateZ(0) 或 will-change 硬加速。
为什么 translate(50%, -50%) 居中会发虚
百分比位移依赖容器尺寸，而容器宽高常为奇数（比如 301px），50% 就算出 150.5px。这个 .5 会让浏览器在渲染时做亚像素插值，文字边缘立刻变软。Chrome 和 Edge 尤其敏感，哪怕只差 0.1px 也糊。
实操建议：
- 静态居中优先用
display: flex+justify-content/align-items，或position: absolute+top: 50%+transform: translateY(-50%)，但确保父容器宽高是偶数 - 必须用百分比时，先取
el.offsetWidth，再套Math.round(value * window.devicePixelRatio) / window.devicePixelRatio校准 - DevTools 里临时删掉
transform，文字瞬间变锐利 → 基本锁定问题来源
JS 动态设置 transform 时怎么避免小数
浏览器不会自动对 getBoundingClientRect() 或动画插值结果取整，JS 层不干预，模糊就必然发生。
实操建议：
- 所有坐标都包
Math.round()：element.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - 动画中每帧都要校验：哪怕起止点是整数，中间帧也可能产出
123.742px，需用requestAnimationFrame+ 取整兜底 - 慎用
transform: scale(1.2)这类浮点缩放；scale(1)、scale(2)安全，scale(1.5)已高风险
rotate 和 scale 怎么控制不糊
rotate(5deg) 或 scale(1.1) 看不出偏移，但它们一样会让文字纹理在 GPU 层重采样。一旦映射失配，就糊。
实操建议：
- 旋转优先用
90deg、180deg这类整数倍角度，避开小角度；rotate(7deg)几乎必糊 - 缩放尽量用整数比：
font-size: 16px→scale(1.25)得20px，比scale(1.23)稳定得多 - 避免组合写法：
transform: scale(1.1) rotate(2deg)会叠加误差，比单用更易糊
什么时候该放弃 transform 改用传统定位
硬件加速不是免费午餐。静态居中、固定缩放、无交互的偏移，完全没必要用 transform——它反而引入合成层和插值风险。
实操建议：
- 纯居中场景，用
flex或grid；需要兼容老浏览器时，用position: absolute+margin: auto - 缩放需求弱时，直接调
font-size或容器width/height，比scale()更稳 - 别乱加
will-change: transform：动画开始前一刻设，最后一帧用requestAnimationFrame清除；否则图层驻留、内存涨、Safari 上反而更糊
最隐蔽的坑是：模糊不报错、不警告，只在特定 DPI、缩放比、浏览器版本下偶然出现。一旦依赖 translateZ(0) 这类“看起来有效”的权宜之计，后续在 iOS 或高分屏上大概率翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
