-webkit-font-smoothing 无效是因为它仅在 WebKit 浏览器中对非 GPU 合成层文字生效，一旦触发 transform、opacity 等属性导致图层提升，即降级为灰度抗锯齿；应检查 Layers 面板、避免小数位移、移除 backface-visibility 和 opacity 干扰，并确保字体栈正确兜底与加载。
为什么加了 -webkit-font-smoothing 也没用
因为这个属性只在 WebKit 内核浏览器（Safari、旧版 Chrome）中生效，且仅对未被提升为 GPU 合成层的文字起作用。一旦元素触发 transform、opacity、will-change 或 backface-visibility: hidden，浏览器就会把它拉进独立图层，此时 -webkit-font-smoothing 完全失效。你看到的“文字忽清忽糊”，其实是图层切换导致的抗锯齿策略降级——从 subpixel AA 切到 grayscale AA。
真正该检查的三件事，比加属性优先
打开 Chrome DevTools 的 Layers 面板，确认文字是否被标红（即已进入 GPU 合成层）：是，则立刻停用所有直接作用于文字容器的 transform 类；检查动画中所有偏移值是否含小数（如 translateX(50%) 在 199px 宽容器里算出 99.5px），应改用 calc(50% - 0.5px) 或整数位移；删掉文字及其任意父级上的 backface-visibility: hidden 和 opacity: 0.99 ——这两个比 -webkit-font-smoothing 更容易引发模糊。
字体栈写法必须带引号且分系统兜底
Windows 的 "Microsoft YaHei" 在 macOS 上根本不存在，Safari 会静默跳过，不报错也不 fallback 到下一项。必须写成完整栈：font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;。中文字体名含空格必须加引号；英文如 Helvetica 可不加，但加了更稳妥。别把 "SimSun" 放在栈末尾——它在 macOS/Linux 上几乎无效，还会拖慢匹配流程。
动画中文字模糊，优先动父容器而非文字本身
不要给 或 直接加 will-change: transform，应作用于其父容器，让文字保留在主图层。如果必须动文字，可加双保险：-webkit-font-smoothing: antialiased + backface-visibility: hidden（仅 WebKit 有效）。但更推荐用 color、text-shadow、font-size 过渡——这些不会触发新图层，渲染路径可控。
最常被忽略的是：字体是否真被加载并激活。用 document.fonts.check('16px "PingFang SC"') 检查，再配合 DevTools 的 Network 和 Computed 面板交叉验证，否则所有样式优化都建立在“假字体”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
