font-weight 无法用 transition 平滑过渡，因浏览器不支持其数值插值；可用 transform+opacity 模拟加粗感，或使用支持 wght 轴的可变字体配合 font-variation-settings 过渡。
font-weight 无法用 transition 平滑过渡
直接给 font-weight 加 transition 几乎无效——浏览器不支持在数字字重值（如 400 → 700）之间做插值动画。你看到的“变粗”其实是硬切，没有中间状态，transition 形同虚设。
根本原因是：CSS 规范中 font-weight 是离散可动画属性（animatable），但实际渲染引擎（Chrome/Firefox/Safari）普遍不实现其插值逻辑。即使写了 transition: font-weight 0.3s，也只会触发重排后立即跳变。
替代方案：用 transform + opacity 模拟加粗感
真正能平滑过渡的是 transform 和 opacity。虽然不能改变真实字重，但可通过轻微缩放+微调透明度制造视觉“变重”错觉，人眼几乎无法分辨。
- 对文字容器设
display: inline-block或inline-flex，避免transform引发换行 - 悬停时用
transform: scale(1.02)（放大 2%）+opacity: 0.98（略降透明度），抑制毛边同时增强厚重感 - 必须配
will-change: transform, opacity提前提示渲染层，否则 Safari 下可能闪动
.hover-bold {
display: inline-block;
transition: transform 0.2s ease, opacity 0.2s ease;
will-change: transform, opacity;
}
.hover-bold:hover {
transform: scale(1.02);
opacity: 0.98;
}
真·字体加粗且需过渡？只能靠字体文件本身
如果设计要求严格匹配字重变化（比如从 Regular 切到 Bold），唯一可靠方式是提前加载同一字体族的多个字重文件（如 font-weight: 400 和 700），再用 @font-face 声明，并通过 font-variation-settings（可变字体）或切换 font-weight 值来触发。
立即学习“前端免费学习笔记（深入）”；
- 前提是字体必须支持可变轴（如
wdth,wght），且你用的是现代可变字体（如 Inter、Roboto Flex） - 声明时需启用
font-variation-settings: 'wght' 400，悬停改为'wght' 700 - 此时
transition: font-variation-settings 0.3s才真正生效——但旧版 Chrome（
别指望用 @font-face 加载两个静态 ttf 然后切 font-weight：浏览器不会过渡，只会等新字体加载完再突变。
为什么不用 text-shadow 模拟加粗？
有人试过用多层 text-shadow（如 text-shadow: 0 0 1px #000）模拟加粗，但它在高 DPI 屏幕上易出锯齿，且无法响应字号缩放（rem/em 变化时阴影大小不变），更关键的是：text-shadow 不参与 transition 插值——浏览器只对颜色、透明度、偏移量做动画，模糊半径（第三个值）不可动画。
- 哪怕写
transition: text-shadow 0.3s，也只会在起始/结束两帧渲染，中间全是空白帧 - 移动端 Safari 对
text-shadow动画支持极差，常直接禁用 - 叠加过多阴影会显著拖慢渲染，尤其长段落文本
transform + opacity 做轻量级视觉反馈。真要动态字重，得从字体选型阶段就锁定可变字体，并确认目标浏览器支持 font-variation-settings。 
