用 transform: scale() 替代 font-size 过渡最稳定，因其绕开字体光栅化不可控、行高舍入误差和布局重排；需注意锚点（如 transform-origin: 0 0）、子元素反向缩放、pointer-events 处理及避免与 font-size 叠加。
直接用 transform: scale() 替代 font-size 过渡，是目前最稳定、兼容性最好、且几乎不抖动的方案。 它绕开了浏览器对字体光栅化时机不可控、行高舍入误差、布局重排等底层限制，尤其适合按钮悬停、菜单展开、标题强调等交互场景。
为什么 font-size 过渡容易抖动
不是你写错了，而是浏览器渲染机制决定的：font-size 变化会触发文本重排（reflow），影响行高计算、基线对齐、甚至周围元素位置；当 line-height 是小数（如 1.3）、或容器高度也在过渡时，像素舍入误差会在每一帧累积，肉眼就看到“跳”或“晃”。transition: font-size 理论上可行，但实际效果高度依赖设备、字体、DPR 和渲染管线状态，不可控点太多。
scale() 缩放怎么写才不踩坑
关键不在“用不用”，而在“怎么用”。常见错误是直接套用却忽略锚点、继承和热区问题：
-
transform: scale(1.2)默认以元素中心为缩放原点，文字会“漂移”——加transform-origin: top left或transform-origin: 0 0锚定左上角 - 缩放会连带改变
padding、border和子元素尺寸，如果只要文字变大，需对子元素反向缩放：font-size: calc(1em / 1.2) - 移动端点击区域可能变小或偏移，必要时在缩放元素上设
pointer-events: none，再给子内容恢复pointer-events: auto - 避免同时声明
font-size和transform: scale()，否则尺寸叠加导致失控
过渡性能与可访问性提醒
transform 默认走合成层（compositor），不触发 layout，帧率更稳；但要注意两点：
- 对频繁缩放的元素，可加
will-change: transform提前提示，但仅限明确动画的元素，别全局滥用 - 纯
scale()不改变语义字号，屏幕阅读器仍读取原始font-size，无障碍友好；但如果缩放后文字过小（如scale(0.8)）导致可读性下降，就得权衡视觉与可用性 - 不要对
body或根元素做scale()，它会干扰视口计算，反而引发更严重的抖动或定位偏移
真正难的不是写出那行 transform: scale(1.15)，而是判断该不该缩放、缩放谁、锚点在哪、以及是否要为子元素“兜底”。这些细节没对齐，哪怕用了 scale()，照样抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
