font-size transition 多数情况下无效，因浏览器不对 font-size 插值计算，尤其单位混用、含 0 或继承值时直接跳变；推荐方案依次为 transform: scale()、CSS 自定义属性 + calc()、JavaScript 手动逐帧更新。
直接写 transition: font-size 0.3s 多数情况下无效——不是你代码写错了，而是浏览器根本不会对 font-size 做插值计算，尤其在单位混用、含 0 或继承值（inherit、unset）时会直接跳变。
为什么 font-size transition 经常失效
浏览器只对「能明确算出中间值」的属性做过渡。而 font-size 在以下情况无法插值：
- 起始或结束值用了不同单位，比如
16px→1.2em - 其中一端是
0、auto、initial、inherit - 父元素
font-size动态变化，子元素用em导致计算链断裂 - 元素本身未显式声明初始
font-size（靠继承得来），transition 没有起点
真正能用的三种方案（按推荐顺序）
首选：用 transform: scale() 模拟字号变化
- 它走 GPU 合成层，不触发重排，所有现代浏览器都平滑支持
- 必须加
display: inline-block或block，否则transform-origin不生效 - 锚点用
transform-origin: top left可避免文字上跳，适合标题/按钮等不牵连布局的场景 - 别同时改
font-size和scale()，否则字体模糊
示例：
立即学习“前端免费学习笔记（深入）”；
.text {
display: inline-block;
transform-origin: top left;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.text:hover {
transform: scale(1.25);
}次选：CSS 自定义属性 + calc()（Chromium 110+ / Firefox 111+）
- 定义
--fs-multiplier，再写font-size: calc(var(--fs-multiplier) * 1rem) - 需用
@property注册该变量为可动画类型，否则 transition 无效 - 适合响应式字号渐变，比如随视口宽度连续缩放
兜底：JavaScript 手动逐帧更新（兼容老浏览器）
- 用
requestAnimationFrame控制每帧element.style.fontSize - 避免直接循环修改
style.fontSize——会强制同步布局，严重掉帧 - 仅在必须精确控制或需配合其他逻辑（如 scroll 触发）时使用
哪些写法看着像对，其实踩坑
这些常见做法实际不可靠：
-
transition: all 0.3s—— 会意外过渡margin、border等，引发布局抖动 - 从
font-size: 0开始过渡 —— 几乎所有浏览器都不支持0→ 非零插值 - 用
em单位但父级字号也在变 —— 子元素过渡不同步，视觉卡顿 - 给
display: none元素加 transition —— 完全不触发，因为元素已脱离渲染流
真正难的不是让字“动起来”，而是想清楚：你要动的是「排版尺寸」（影响布局、需真实改变 font-size），还是「视觉尺寸」（只求看起来变大，用 transform 更稳）。前者极少需要动画，后者才是日常高频需求。
