CSS中无法直接对font-size使用transition动画，因其在相对单位、继承值等场景下插值失败；推荐用transform: scale()实现视觉缩放，兼容性好且性能优。
CSS 没有这个属性，也不存在原生支持字体大小的平滑过渡动画 —— 直接写是无效的，因为默认不参与 CSS transition。
为什么
无法直接用
动画
CSS transition 只对「可计算、可插值」的属性生效。
理论上支持（它属于长度类属性），但实际中常失效，原因包括：
浏览器
对
的过渡支持不稳定，尤其在
、
、
等相对单位下，计算链断裂导致插值失败
当元素初始或目标状态为
、
、
或
（如某些内联元素）时，无法得出数值起点/终点
父元素
动态变化时，子元素的相对单位会二次计算，transition 无法追踪中间值
真正能用的三种平滑缩放方案
绕过
自身限制，用等效视觉效果替代：
用+
：最可靠。对文字做整体缩放，配合
提升性能。注意：缩放会影响布局流（默认不占位），需用
控制锚点，或包裹一层
容器来稳定基线
用 CSS 自定义属性 +驱动
：定义
，再写
，然后对
做 transition（需搭配
注册为可动画类型，仅 Chromium 110+ 支持）
JavaScript 手动控制
：监听事件，用
逐帧更新
，适用于需要精确控制或兼容老浏览器的场景
推荐做法：用
实现「伪字号过渡」
这是目前兼容性最好、性能最高、行为最可控的方式：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
关键点：
必须加
（或
）才能让
生效于文本自身
避免用
后再改
补偿，那会破坏垂直节奏；如需行高同步变化，应一并加入
（例如组合
和
）
不要同时设置
和
，否则出现双重缩放，字体模糊
真正难的不是写几行 CSS，而是判断该动的是「渲染尺寸」还是「排版尺寸」——前者用
，后者才该碰
；而绝大多数交互场景，用户要的只是“看起来变大了”，不是“占据更多行高”。
transition-font-sizetransition: font-size 0.3sfont-sizefont-sizetransitionfont-sizefont-sizeemrem%inheritinitialunsetautofont-sizefont-sizetransform: scale()transform-originwill-change: transformtransform-origin: top leftinline-blockcalc()--fs-multiplierfont-size: calc(var(--fs-multiplier) * 1rem)--fs-multiplier@propertyrequestAnimationFramestyle.fontSizetransform: 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-blockblocktransform-originscale(1.25)line-heighttransformscale()translateY()font-sizetransform: scale()transformfont-size