-webkit-font-smoothing 仅在未触发GPU合成层的macOS Safari或旧版Chrome中有效，对Firefox、Windows Chrome等无效，且无法解决transform导致的渲染模糊问题。
-webkit-font-smoothing 只在 WebKit 内核浏览器（Chrome、Safari、Edge 新版）中生效，对 Firefox、旧版 Edge 或 360 极速模式基本无效；它不解决 transform 引发的 GPU 合成层降级问题，仅微调亚像素渲染策略。
为什么 -webkit-font-smoothing 常被误用
开发者看到文字模糊，第一反应是加 -webkit-font-smoothing: antialiased 或 subpixel-antialiased，但实际效果取决于：浏览器是否已将文字拉进独立合成层——一旦触发 transform、opacity、filter，该属性即失效；macOS 上默认为 subpixel-antialiased，强行设为 antialiased 反而让文字更虚、更细；Windows Chrome 中该属性已被忽略多年，加了也白加。
常见错误现象包括：
- 加了
-webkit-font-smoothing: antialiased后，小字号文字变细发灰，对比度下降 - 动画过程中文字忽清忽糊，说明属性未稳定生效，而是被图层切换覆盖
- 在 DevTools 的 Layers 面板里看到文字区域标红（独立 GPU 图层），此时
-webkit-font-smoothing已无控制权
哪些场景下它真能起效
仅当文字未被提升为合成层，且运行在 macOS Safari 或较老版本 Chrome（≤112）时，该属性才可能产生可感知变化：
立即学习“前端免费学习笔记（深入）”；
- 静态页面中纯色背景上的标题文字，无任何
transform、will-change、backface-visibility - 使用
font-smooth: always（已废弃）或text-rendering: optimizeLegibility作为补充时，有叠加微调作用 - 配合
transform: translateZ(0)却未触发新图层（比如父容器已隔离）时，偶有稳定表现
示例写法（仅作兼容性兜底，不推荐主方案）：
.text-safe {
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
}
比 -webkit-font-smoothing 更优先检查的三件事
真正决定文字是否清晰的，从来不是这个属性，而是渲染路径是否可控：
- 打开 Chrome DevTools → Layers 面板，确认文字是否被框出红色图层——是，则立刻停用所有
transform类动效，改用color、text-shadow、font-size过渡 - 检查动画中所有
translateX/Y值是否含小数：如容器宽199px，translateX(50%)=99.5px，强制舍入必糊；应改用calc(50% - 0.5px)或固定整数偏移 - 删掉文字元素及其任意父级上的
backface-visibility: hidden和opacity: 0.99——这两个比-webkit-font-smoothing更容易无声无息地触发图层提升
复杂点在于：你调的不是“怎么让模糊变清”，而是“怎么让浏览器别把文字塞进 GPU 纹理里”。一旦进了合成层，-webkit-font-smoothing 就像给打印机调墨水浓度，而纸张早就换成了热敏纸。
