font-weight未生效的四大原因：被更高优先级规则覆盖、选择器特异性不足、字体本身不支持指定字重、内联样式或JS动态修改覆盖。应通过DevTools的Computed和Styles面板定位真实生效值。
font-weight 值写对了但没加粗，先查是否被覆盖
很多情况下 font-weight 看似写了 bold 或 700 却不生效，根本原因不是语法错，而是 CSS 层叠规则里它被更高优先级的规则盖掉了。浏览器开发者工具里看该元素的 Computed 面板，展开 font-weight，点右侧箭头能看到所有命中该属性的声明——带删除线的就是被覆盖的。
- 检查是否有父元素设置了
font-weight: normal且子元素没显式重写（继承值会生效） - 确认没用
!important的其他规则在后面强行设回400 - 注意某些 UI 框架（如 Ant Design、Element Plus）会在组件内部用高特异性选择器重置字体粗细
选择器优先级不够导致 font-weight 被忽略
比如你写了 .btn { font-weight: 700; }，但框架样式用了 button.btn-primary 这类组合选择器，它的优先级就高于单类名，你的规则自然失效。
- 用浏览器 DevTools 的
Styles面板看哪条规则“赢了”，右键“Force element state”可临时验证是否真被压住 - 提升自己规则的优先级：改用
button.btn、.btn.btn-strong，或加一层body .btn - 避免滥用
!important；真要用，也只加在font-weight上，别整条规则都上
font-weight 数值无效：字体本身不支持该字重
CSS 中 font-weight: 900 写得再狠，如果当前字体文件（比如系统自带的 PingFang SC、Segoe UI）压根没提供 900 字重，浏览器就会 fallback 到最接近的可用字重（通常是 400 或 700），看起来就是“不加粗”。
- 用
@font-face引入字体时，务必检查font-weight声明是否和实际文件匹配，例如：@font-face { font-family: 'MyFont'; src: url('myfont-bold.woff2') format('woff2'); font-weight: 700; } - 查看字体支持的字重范围：Mac 上用“字体册”App，Windows 用“字体预览”，或直接查字体官网文档
- Web 字体加载失败时，后备字体（
font-family: 'MyFont', sans-serif;）可能不支持你要的字重，此时会退回到sans-serif的默认行为
内联样式或 JS 动态设置覆盖了 CSS 规则
有些组件库或业务代码会在 JS 里直接操作 element.style.fontWeight = 'normal'，这种内联样式优先级高于外部 CSS，除非你用 !important 或更高优先级选择器去对抗。
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 的
Elements面板里看元素上是否有style="font-weight: ..."属性 - 检查 JS 是否调用了
element.classList.remove()把加粗类删了，或者用了element.style.fontWeight = ''清空但没触发重绘 - React/Vue 组件中，注意
style对象绑定是否覆盖了 class 中的font-weight
font-weight 本身，而在于你没意识到它正被继承、被覆盖、被字体文件限制、或者被 JS 暗中改写。盯着 Computed 面板里的真实值，比反复改 CSS 更快定位问题。 
