transition 对 font-size 无效的常见原因是起始或结束值为 auto、inherit 或无单位，css transition 仅支持可插值的数值型长度（如 px、em、rem、%），需显式声明初始和目标值，避免混用单位或依赖隐式继承。
transition 对 font-size 无效的常见原因
直接写 transition: font-size 0.3s 却没动画？大概率是起始或结束值为 auto、inherit 或未显式声明单位。CSS 的 transition 只能插值计算**可计算的数值型长度**，比如 16px、1.2em、100%，但不包括 medium（关键字）、small 或未设置的默认值。
- 检查元素当前
font-size是否真实存在且带单位（用浏览器开发者工具看 computed 值） - 避免在触发前用 JS 动态设为
''或undefined，这会让浏览器无法获取起始值 - 如果父级用了
rem基准，确保根字体没被 JS 突然重设导致跳变
必须显式声明初始和目标 font-size 值
哪怕你只想“放大一点”，也不能只写 hover 时的值，初始状态也得明确。否则 transition 拿不到起始值，就直接跳变。
button {
font-size: 14px; /* 必须写死初始值 */
transition: font-size 0.25s ease;
}
button:hover {
font-size: 16px; /* 也必须是具体数值+单位 */
}- 支持的单位：
px、em、rem、%（pt和cm理论可行但极少用） - 别混用单位：从
1rem→18px不会过渡，浏览器无法自动换算 - 用
em/rem更灵活，但要注意继承链是否稳定
用 transform: scale() 替代 font-size 过渡更可靠
如果你只是想“看起来变大”，且不介意文字渲染细节（比如 subpixel 渲染、行高联动），transform: scale() 是更稳妥的选择——它不触发重排，性能好，兼容性也好，而且几乎不会因为值不可插值而失效。
a {
display: inline-block;
transition: transform 0.2s ease;
}
a:hover {
transform: scale(1.15);
}-
scale()不影响布局流，但会缩放整个元素（含 padding/border） - 若需保持行高/对齐不变，加
transform-origin: center - 移动端注意
scale()可能影响点击热区，必要时用pointer-events: none配合子元素恢复
JS 动态改 font-size 时 transition 失效怎么办
用 JS 设置 element.style.fontSize = '18px' 后发现没动画？是因为样式变更被批量合并，浏览器没机会读取旧值。需要强制触发重排（reflow）来“固定”起始状态。
立即学习“前端免费学习笔记（深入）”；
- 先读一个触发 layout 的属性，比如
offsetHeight：el.style.fontSize = '16px'; void el.offsetHeight; // 强制重排，锁定当前值 el.style.fontSize = '18px';
- 或者用
getComputedStyle(el).fontSize也能触发 - 更现代的做法：用
requestAnimationFrame分两帧操作，第一帧设初始值并 flush，第二帧设目标值
实际用起来最常卡住的地方不是语法，而是 font-size 的“隐式继承”和“计算时机”。只要确保两个状态都是确定的、可插值的数值，transition 就不会掉链子。
