CSS中无法直接对font-size使用transition动画，因其在相对单位、继承值等场景下插值失败；推荐用transform: scale()实现视觉缩放，兼容性好且性能优。

CSS 没有 transition-font-size 这个属性，也不存在原生支持字体大小的平滑过渡动画 —— 直接写 transition: font-size 0.3s 是无效的，因为 font-size 默认不参与 CSS transition。

为什么 font-size 无法直接用 transition 动画

CSS transition 只对「可计算、可插值」的属性生效。font-size 理论上支持（它属于长度类属性），但实际中常失效，原因包括：

• 浏览器对 font-size 的过渡支持不稳定，尤其在 em、rem、% 等相对单位下，计算链断裂导致插值失败
• 当元素初始或目标状态为 inherit、initial、unset 或 auto（如某些内联元素）时，无法得出数值起点/终点
• 父元素 font-size 动态变化时，子元素的相对单位会二次计算，transition 无法追踪中间值

真正能用的三种平滑缩放方案

绕过 font-size 自身限制，用等效视觉效果替代：

• 用 transform: scale() + transform-origin：最可靠。对文字做整体缩放，配合 will-change: transform 提升性能。注意：缩放会影响布局流（默认不占位），需用 transform-origin: top left 控制锚点，或包裹一层 inline-bloc

  

  k 容器来稳定基线
• 用 CSS 自定义属性 + calc() 驱动：定义 --fs-multiplier，再写 font-size: calc(var(--fs-multiplier) * 1rem)，然后对 --fs-multiplier 做 transition（需搭配 @property 注册为可动画类型，仅 Chromium 110+ 支持）
• JavaScript 手动控制：监听事件，用 requestAnimationFrame 逐帧更新 style.fontSize，适用于需要精确控制或兼容老浏览器的场景

推荐做法：用 transform: 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);
}

关键点：

• 必须加 display: inline-block（或 block）才能让 transform-origin 生效于文本自身
• 避免用 scale(1.25) 后再改 line-height 补偿，那会破坏垂直节奏；如需行高同步变化，应一并加入 transform（例如组合 scale() 和 translateY()）
• 不要同时设置 font-size 和 transform: scale()，否则出现双重缩放，字体模糊

真正难的不是写几行 CSS，而是判断该动的是「渲染尺寸」还是「排版尺寸」——前者用 transform，后者才该碰 font-size；而绝大多数交互场景，用户要的只是“看起来变大了”，不是“占据更多行高”。