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-block容器来稳定基线 -
用 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；而绝大多数交互场景，用户要的只是“看起来变大了”，不是“占据更多行高”。
