font-weight无效的根源是字体不支持对应字重，需验证字体是否提供该字重、css是否被覆盖、取值是否合法，并注意浏览器渲染差异。
font-weight数值写了但没反应，先查字体支不支持
绝大多数“加粗不生效”问题，根源不在 CSS 写错，而在当前 font-family 根本没提供你写的那个字重。比如 Microsoft YaHei（微软雅黑）只内置 400 和 700 两档，设 font-weight: 500 或 600 会被浏览器直接降级到 400——看起来就是“没变化”。
验证方法很简单：打开 DevTools → Elements 面板 → 找到该元素 → 切到 Computed 标签页 → 展开 font-weight，看右侧显示的最终计算值是 400 还是 700；再点旁边字体名，确认它是否真有对应字重文件（比如 Inter 的 wght@500 是否被加载）。
- 系统字体（如
PingFang SC、Segoe UI）普遍缺失100–300和500–600变体 - Web 字体（如 Google Fonts）默认只加载
wght@400和wght@700，要支持500必须显式声明：family=Inter:wght@400;500;700 - 自定义字体用
@font-face引入时，font-weight值必须和实际文件严格匹配（font-weight: 500对应myfont-medium.woff2，不能写medium）
DevTools里看到font-weight被划掉，说明被覆盖了
即使字体支持、数值合法，也可能被更高优先级的规则干掉。在 Styles 面板里，如果某条 font-weight 声明带删除线（strikethrough），就表示它输了层叠比赛。
常见覆盖来源：
- UI 框架组件内部用了高特异性选择器，比如
button.ant-btn-primary覆盖了你的.btn - 父元素设了
font-weight: normal，子元素没显式重写，继承后生效 - 全局样式用了
!important，比如body { font-weight: 400 !important; } - JS 动态设置了内联样式：
element.style.fontWeight = 'normal'（优先级高于外部 CSS）
解决思路不是硬加 !important，而是提升选择器权重：把 .title 改成 article .title，或检查构建后 CSS 加载顺序是否和本地开发不一致。
font-weight: 10 或 lighter 这类写法根本无效
font-weight 合法值只有两类：整百数 100–900，或关键字 normal/bold/lighter/bolder。写 font-weight: 10 是非法值，浏览器直接忽略，等同于 normal（即 400）。
更隐蔽的坑是 lighter 和 bolder：
- 它们不对应固定数值，而是相对父元素计算：如果父元素是
400，bolder就找下一个可用字重（可能是700；但如果字体只有400和700，bolder在400上就等于700，在700上可能还是700） - 行为不可预测，尤其跨字体时回退逻辑复杂，建议一律用绝对数值（如
300、600）
不同浏览器渲染差异大，别指望font-weight精确控制宽度
Chrome、Firefox、Safari 对同一 font-weight 的像素级渲染可能完全不同——尤其是细体（100–300）在 Safari 下常被当作 400 渲染，Firefox 却能显示明显差异。
更麻烦的是：加粗会改变字符宽度，导致布局抖动。如果用在 :hover 或动画中，可能触发重排（reflow），低端设备上卡顿明显。
- 避免靠
font-weight控制容器尺寸（比如用加粗撑满按钮） - 悬停强调优先考虑
color或transform: scale(1.02)等轻量方案 - 真要用动态字重，配合 CSS 变量 +
transition，但注意font-weight本身不支持平滑过渡，浏览器只会阶梯跳变
最常被忽略的一点：字体字重支持不是“CSS 写了就有”，而是“字体文件真包含、浏览器真加载、系统真渲染”。三者缺一不可，其中任意一环断掉，font-weight 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
