font-smoothing无法解决文字抖动，抖动根源是line-height计算值为小数导致像素取整波动；有效方案是强制line-height为整数、改用transform: scaley()替代height过渡，或加will-change: transform隔离合成层。
font-smoothing 不是解决文字抖动的正确路径
直接设置 font-smoothing（或 -webkit-font-smoothing）无法修复 CSS 过渡中出现的文字抖动。它只控制字体边缘的抗锯齿渲染方式，影响的是文字清晰度或灰度，和抖动无关——抖动本质是位置跳变，不是模糊或锯齿。
抖动真正来自 line-height 计算值为小数
当 font-size 和 line-height 相乘得到非整数值（例如 font-size: 15px; line-height: 1.3; → 19.5px），浏览器在每一帧渲染时会对文本行高做像素取整。height 过渡配合 ease 曲线，导致每帧高度变化不均，各行文本取整结果来回波动，视觉上就是“抖”。
- 这不是字体加载问题，
@font-face预加载或font-display无效 - 也不是 subpixel 渲染开关问题，
font-smoothing改不了取整逻辑 - 检查方法：用 DevTools 查看 computed
line-height，若带小数点，大概率是根因
真正有效的修复方式只有三个方向
必须从渲染机制入手，切断“小数行高 + 小数高度变化 + 取整抖动”这个链条：
- 强制
line-height计算为整数：改用line-height: 20px或调整font-size（如 16px × 1.25 = 20px） - 避开 height 过渡：用
transform: scaleY()替代，它不触发 layout，且缩放中心可控，无取整干扰 - 加合成层隔离：对文字容器设
will-change: transform;或transform: translateZ(0);，让浏览器提前分配独立图层，减少重排干扰
backface-visibility: hidden 有时管用，但别乱加
在某些涉及 transform 的嵌套动画里，backface-visibility: hidden; 能抑制因背面可见性切换引发的高度重算抖动。但它对纯 height 过渡无效，且在 Safari 中可能意外禁用子元素的硬件加速。
- 仅当元素已使用
transform（如 rotate、scale）且抖动出现在 hover 切换瞬间时才考虑 - 必须配合
-webkit-backface-visibility: hidden;才能在旧版 Safari 生效 - 加了之后要验证是否导致文字渲染变虚——这是 GPU 合成层未对齐像素的典型副作用
最常被忽略的是：抖动往往不是单一原因，而是 height + line-height + transition-timing-function 三者耦合的结果。改掉其中任意一个，抖动就消失；只调 font-smoothing，等于给地震加固窗户——方向错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
