CSS如何让文字大小在特定状态下平滑变大_通过transition监听font-size

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 就不会掉链子。