CSS中font-size支持transition，但需用稳定单位（如px）、显式声明起止值并写在基础选择器上；否则因单位不一致或继承链变动导致失效。
hover 时文字大小无法直接 transition 的原因
CSS 中 font-size 本身支持 transition，但很多人写不出来平滑效果，根本原因是：**没有显式声明初始和结束状态的可动画值，或用了不可动画的单位（比如 em 嵌套计算、rem 在根元素动态变化时）**。浏览器只能对数值型、线性可插值的属性做过渡，而 font-size 是其中之一——前提是单位稳定、起止值明确。
正确写法：用绝对单位 + 显式 transition 声明
最稳妥的方式是统一用 px、vw 或无单位数值（配合 clamp()）；避免在 hover 前后混用 em/rem 导致计算链断裂。
-
transition: font-size 0.3s ease;必须写在非 hover 的基础选择器上（否则首次 hover 不触发） - 起始
font-size和:hover下的font-size都得是明确数值，例如16px→19px，而非1em→1.2em（除非父元素字号固定且无重排） - 若需响应式缩放，优先用
clamp(1rem, 2.5vw, 1.2rem)，它本身可被 transition（现代浏览器），但需确保两端都是长度单位
button {
font-size: 16px;
transition: font-size 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
font-size: 18px;
}
替代方案：用 transform 缩放文字（更高性能）
如果只是视觉上“变大”，且不希望影响布局流（比如换行、父容器高度突变），transform: scale() 是更优解——它走合成层，不触发重排，动画更顺滑。
-
scale()影响的是渲染层，文字实际font-size没变，所以点击区域、行高、盒模型都不变 - 需搭配
transform-origin: center避免偏移；若要保持基线对齐，加vertical-align: middle或用display: inline-flex - 注意：屏幕阅读器和打印样式仍按原始字号解析，无障碍场景下慎用纯 transform
a {
font-size: 16px;
display: inline-block;
transform-origin: center;
transition: transform 0.2s ease;
}
a:hover {
transform: scale(1.15);
}
常见失效场景与排查点
即使语法正确，也可能看不到过渡效果，重点检查这些：
立即学习“前端免费学习笔记（深入）”；
- 父元素或自身设置了
font-size: inherit或em值，而继承链中某处动态修改了字号（如 JS 改document.documentElement.style.fontSize） - CSS 优先级冲突：hover 规则被其他更具体的规则覆盖，导致
font-size实际没生效 - transition 被简写覆盖：比如写了
transition: all 0.3s又在别处写了transition: background-color 0.3s，后者会完全替换前者 - 浏览器强制禁用动画：用户开启了“减少运动”偏好（
@media (prefers-reduced-motion)），此时应主动适配，加reduce-motion: reduce判断
真正卡住的地方往往不是 transition 写法，而是字体尺寸的“源头是否可控”。一旦涉及多层 em/rem 计算或运行时 JS 干预，就很难保证过渡的确定性。
