font-weight在:hover中不生效的主因是样式优先级覆盖或字体不支持对应字重，应检查开发者工具中的覆盖状态、使用更具体选择器、确保字体包含所需字重、采用CSS变量统一管理并优先使用无单位数字值。
font-weight在:hover等伪类里不生效？检查是否被更高优先级样式覆盖
很多情况下写好 :hover { font-weight: 700; } 却没变化，不是语法错，而是别的规则把它压住了。比如全局设置了 body { font-weight: 400 !important; }，或者组件库的 class 优先级更高。
- 用浏览器开发者工具点中元素，看
font-weight是否被划掉（表示被覆盖） - 避免滥用
!important，优先用更具体的 selector，比如.btn:hover而不是单纯:hover - 注意字体本身是否支持对应字重——有些 Web 字体只提供了 400 和 700 两个档，设
font-weight: 600就会回退到最近可用值（通常是 400 或 700）
用CSS变量统一管理font-weight值，避免硬编码
把字重抽象成变量后，换主题、适配暗色模式、做A/B测试都方便得多，改一处就全局生效。
- 定义变量推荐放在
:root里：:root {<br> --fw-normal: 400;<br> --fw-semibold: 600;<br> --fw-bold: 700;<br>} - 使用时直接绑定：
font-weight: var(--fw-semibold); - 变量名别用
--font-weight-bold这种冗余命名，--fw-bold足够，缩写是行业惯例，也减少拼写错误 - 不要在变量里写单位（
var(--fw-bold)不是var(--fw-bold) * 1），font-weight的值本来就是无单位数字
font-weight数值 vs 关键字：为什么建议优先用数字
虽然 bold、normal 看起来简洁，但它们实际映射关系模糊，不同浏览器或字体下可能不一致。
-
font-weight: bold等价于font-weight: 700，但前提是字体有 700 字重；否则可能 fallback 到 600 甚至 400 - 用数字能明确控制层级，比如按钮默认
400，悬停600，点击态700，语义清晰且可预测 - CSS 中
font-weight支持 100–900 的整百数，但不是所有值都会触发真实变化——多数字体只实现 400/500/600/700 四档，中间值只是“尝试”，不可依赖
动态切换字体粗细时要注意 reflow 和渲染抖动
频繁修改 font-weight（比如配合 scroll 或 mousemove）可能触发重排，尤其在旧版 Safari 或低端安卓机上明显卡顿。
立即学习“前端免费学习笔记（深入）”；
- 如果只是视觉强调，考虑用
transform: scale(1.02)+opacity配合硬件加速，比改字重更轻量 - 真要动态切，优先用 CSS 变量 +
transition，而不是 JS 直接改内联样式：a {<br> font-weight: var(--fw-normal);<br> transition: font-weight 0.2s ease;<br>}<br>a:hover {<br> --fw-normal: 600;<br>} - 注意：
font-weight本身不支持平滑过渡（浏览器会阶梯式跳变），所以过渡效果其实是“开关式”的，别对动画精度抱太高期望
字体粗细看似简单，但牵扯到字体加载、CSS 层叠、渲染管线多个环节。最常被忽略的是：你写的 font-weight: 600，最终显示出来是不是真的 600——得看字体文件里有没有这一档，以及浏览器有没有悄悄 fallback。
