真正起作用的是控制渲染层级、像素对齐和字体加载上下文，因为transform触发合成层提升导致亚像素渲染失效，文字被当作位图处理而引发双线性插值模糊；-webkit-font-smoothing等属性无效甚至加剧问题。
加 -webkit-font-smoothing 或 transform-style: preserve-3d 不但不能解决文字模糊，反而大概率让问题更难定位、更严重。真正起作用的，是控制渲染层级、像素对齐和字体加载上下文。
为什么 transform 会让文字变糊
不是 transform 本身有问题，而是它触发了浏览器的合成层（composite layer）提升机制。一旦文字所在元素或其任意父级被提升为独立 GPU 合成层，亚像素渲染就基本失效——文字被当成一张位图处理，缩放、旋转、微小位移都会引发双线性插值，边缘立刻发虚。
-
translateX(50%)在容器宽为 199px 时，算出来是 99.5px → 强制舍入导致亚像素错位 -
scale(1.2)把 16px 文字缩成 19.2px → GPU 纹理重采样，笔画变细、边缘糊开 - 哪怕只加
will-change: transform，也会提前创建合成层，文字提前“进箱” - Chrome DevTools 的 Layers 面板里看到文字区域标红+多层叠加，就是糊的铁证
哪些 CSS 属性会偷偷提升图层
比 transform 更隐蔽的是那些「看起来无害」的属性，它们单拎出来就能让文字脱离主渲染流：
-
opacity: 0.99—— 小于 1 就触发合成层，opacity: 1才安全 -
filter: blur(0)或filter: brightness(1)—— 只要声明了filter，不管值多少，一律升层 -
backface-visibility: hidden—— 常被当“防闪动技巧”，实则直接拉文字进 GPU -
perspective: 1000px—— 即使没用 3D 变换，只要设了它，父容器就开始走 3D 渲染管线
这些属性组合起来（比如 opacity: 0.99 + transform: translateZ(0)），图层数翻倍，糊得更快，还可能伴随闪烁。
真正可控的修复点：从渲染上下文入手
你没法强制浏览器用亚像素渲染合成层里的文字，但可以避免让它进合成层，或者让进层后的文字尽量“不动”：
- 用
isolation: isolate包住文字父容器 —— 阻断上级transform/filter的穿透影响 - 文字动效改用
color、text-shadow、font-size（配合transition）—— 这些不触发图层提升 - 缩放动画优先用整数倍：
scale(1.25)（16px → 20px）、scale(1.5)（16px → 24px） - 居中类
transform: translate(-50%, -50%)后，加will-change: transform前先确认父容器宽高是偶数；否则改用top/left/margin+position: absolute - 自定义字体务必设
font-display: optional或block—— 防止加载前回退到极细系统字体，重绘时视觉抖动+临时模糊
别在 -webkit-font-smoothing 上浪费时间
这个属性在 iOS Safari（包括微信、钉钉所有 WKWebView）里被硬性忽略；Chrome/Edge 自 110 版本起已完全移除解析逻辑；Firefox 从不支持。macOS 上它还受系统设置压制——只要用户关了「系统设置 → 辅助功能 → 显示 → 字体平滑」，-webkit-font-smoothing: subpixel-antialiased 就自动降级为灰阶抗锯齿，文字立刻发虚。
复杂点在于：你看到的“糊”，其实是浏览器主动放弃亚像素渲染的结果。控制权不在你怎么加属性，而在于让文字不动，或只动它该动的部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
