translatez(0)仅强制创建合成层，使文字降级为灰度抗锯齿并触发gpu双线性插值，单独使用无效，须与scale()或rotate()同写一行；滥用会导致图层嵌套、内存飙升，在macos safari和多数移动端基本无效。
直接改 font-size，别用 transform: scale()；必须用 transform 时，确保缩放后尺寸是整数像素，且不单独加 translateZ(0)。
为什么 translateZ(0) 不但没用还更糊
translateZ(0) 只是强制创建合成层，把文字从主渲染流里拎出来交给 GPU 合成——这一步就让浏览器放弃亚像素抗锯齿，降级为灰度抗锯齿。你看到的“变清晰”，往往是动画帧率提升带来的错觉，或是 Chrome 某些版本偶然触发了高质量光栅化回退，不可复现。
- 单独写
transform: translateZ(0)完全无效；必须和scale()或rotate()写在同一行，比如transform: scale(1.25) translateZ(0) - 在 macOS Safari 和多数移动端基本无效，仅 Windows Chrome 110+ 偶尔“凑效”
- 若父容器已设
will-change: transform，再加translateZ(0)可能引发图层嵌套，糊得更明显 - 滥用会导致图层数爆炸，内存占用飙升，尤其在长列表、卡片流中
真正可控的缩放方案：绕开 GPU 插值
核心思路不是“加速”，而是“不触发降级”。GPU 插值模糊的根本原因是非整数缩放比导致双线性滤波插值，所以优先让缩放结果落在整数像素上。
- 原
font-size: 16px，配scale(1.25)→ 得 20px（整数），避免scale(1.23)（得 19.68px） - 改用
font-size+transition: font-size，虽性能略低，但渲染质量稳定，无模糊风险 - 必须用
scale()动画？在 JS 中动态取整：const scale = Math.round(rawScale * 100) / 100;，再拼进transform - 对父容器加
isolation: isolate，防止它意外创建新合成层，干扰子元素文字渲染
Firefox WebRender 下字体完全发虚怎么办
火狐启用硬件加速后，若 about:support 中“合成器”显示为 WebRender，那所有 CSS 字体平滑设置都会失效——因为 WebRender 绕过了传统抗锯齿控制路径。
- 访问
about:config，把gfx.webrender.subpixel-antialiasing.enabled设为false - 同时把
gfx.font_rendering.cleartype_params.rendering_mode设为1（灰度抗锯齿模式） - 打开
about:preferences#general→ “字体”高级设置 → 将“简体中文”字体明确设为微软雅黑（不是“微软正黑体”或“SimSun”） - 重启 Firefox 后，再配合
text-rendering: optimizeLegibility和-moz-osx-font-smoothing: grayscale
文字模糊最麻烦的地方在于它不报错、不警告，只在特定 DPI、缩放比、浏览器版本下偶然出现。一旦依赖 translateZ(0) 这类权宜之计，后续在 iOS 或高分屏上大概率翻车——问题不在代码写没写，而在是否确认过 Layers 面板里文字区域是否真被标为 composite layer。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
