translateZ(0)不能真正解决文字模糊，它仅强制创建合成图层，反而导致亚像素抗锯齿降级；所谓“变清晰”多为帧率提升的错觉或特定环境下的偶然回退，不可靠。
translateZ(0)真能解决文字模糊？先看它实际干了什么
不能直接解决，反而可能让问题更隐蔽。translateZ(0) 的作用是强制创建独立合成图层（composite layer），把元素从主渲染流里拎出来交给 GPU 合成——但这恰恰是文字变糊的根源：一旦脱离主图层，浏览器就大概率放弃亚像素抗锯齿，降级为灰度抗锯齿。你看到的“变清晰”，往往是动画帧率提升带来的视觉错觉，或是某些 Chrome 版本在特定条件下触发了高质量光栅化回退，不可靠。
哪些场景下translateZ(0)可能“凑效”
它只在极有限的组合中偶然改善，且高度依赖环境：
-
translateZ(0)必须和scale()或rotate()写在同一transform值里，例如transform: scale(1.05) translateZ(0);—— 单独写无效 - 仅在 Windows Chrome 110+ 上有一定概率生效；macOS Safari 基本无效
- 对小范围、短时长（≤0.15s）、整数 DPI 屏幕下的轻微缩放（如
scale(1.02)）才有点用 - 若父容器已设
will-change: transform，再加translateZ(0)可能引发图层嵌套冲突，糊得更厉害
比translateZ(0)更稳的替代方案
真正可控的解法不是“加速”，而是“不触发降级”：
- 动画写在父容器上，文字元素本身不带
transform、opacity、filter—— 例如用.card:hover .card-title改 class，靠color或text-shadow做反馈，而非直接动文字 - 必须缩放？改用
font-size+transition: font-size，虽性能略低但渲染质量稳定 - 必须位移？确保值为整数像素：
transform: translateX(10px)比translateX(50%)安全得多；若要用百分比，先检查容器宽高是否为偶数（避免 99px × 50% = 49.5px） - 必要时加
isolation: isolate到父容器，防止其意外创建新图层影响子文字
容易被忽略的关键点
很多人调了半天 translateZ(0) 和 -webkit-font-smoothing，却没打开 Chrome DevTools 的「Layers」面板确认：文字区域是否真的被标为 composite layer。只要看到那一块被框出来，就说明它已经脱离主图层——此时所有字体微调都只是补救，不是根治。真正的控制权，在于让文字不动，或者只动它该动的部分。
立即学习“前端免费学习笔记（深入）”；
