font-weight必须写为无引号关键词（如bold）或纯数字（如700），加引号如"bold"或"600"会导致语法错误而静默失效；实际效果还取决于字体是否提供对应字重，否则浏览器将回退至最近可用值。
font-weight 写成字符串会失效
直接写 font-weight: "bold" 或 font-weight: "600" 是常见错误——引号会让整个声明被浏览器忽略，font-weight 只接受无引号的关键词（如 bold）或纯数字（如 700）。写了等于没写，DevTools 里会直接不显示这条规则。
-
font-weight: bold;✅ 安全，等价于700，几乎所有字体都支持 -
font-weight: 700;✅ 推荐，语义清晰，便于后续扩展（比如要更粗就改800） -
font-weight: "bold";❌ 语法错误，静默失效 -
font-weight: bolder;⚠️ 小心，它依赖父元素当前值，嵌套深了容易失控（比如父是700，再bolder可能还是700）
按钮加粗没反应？先查字体是否真支持该字重
你写了 font-weight: 800;，但按钮文字看起来和 400 没区别——大概率不是 CSS 错了，而是当前字体压根没打包 800 这一档。浏览器不会报错，只会悄悄 fallback 到最近可用值（通常是 700 或 400）。
- 系统字体（如 Windows 的微软雅黑、macOS 的
-apple-system）通常只提供400和700两档，800、900基本无效 - 用 Google Fonts 时，必须显式加载对应字重，例如：
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800，漏掉800就用不上 - 自定义字体用
@font-face时，font-weight声明值必须和实际.woff2文件的元数据严格一致，否则匹配失败 - 运行时验证：等字体加载完后执行
document.fonts.check('800 Inter')，返回true才说明可用
button 元素上 font-weight 被覆盖的典型场景
即使你写了 button { font-weight: 700; }，也可能没生效——button 是用户代理样式（user agent stylesheet）重度干预的元素，很多框架或重置样式会强行设为 normal 或 400。
- 打开 DevTools → Elements → Styles 面板，看
font-weight是否被划掉（strikethrough），被划掉说明有更高优先级规则在起作用 - Bootstrap 等 UI 框架常全局重置
button的font-weight，此时需提高选择器权重，比如用button.btn-primary或.my-btn - 避免滥用
!important；它能压住冲突，但掩盖了真正的问题来源，后期维护成本高 - 检查是否用了
font-weight: inherit—— 如果父容器是600，子button继承后可能意外变粗，尤其在组件嵌套中
加粗后文字发虚、边缘模糊怎么办
这不是 CSS 写错了，而是浏览器对缺失字重做了模拟加粗（fake bold）：强行拉伸笔画导致渲染失真，Windows + Chrome 组合下尤为明显。
- 优先选用原生字重，比如 Google Fonts 页面上明确标出的
700或800链接，别指望650这种非整百数能生效 - 别用
text-shadow: 0 0 1px black“假装加粗”，这会让模糊更严重 -
-webkit-font-smoothing: antialiased可缓解部分失真，但它影响整块文本，且仅限 WebKit，慎用 - 最可靠解法：换字体。选 Inter、SF Pro、Roboto 这类明确提供多档字重的 Web 字体，并确保加载了对应
wght参数
font-weight 的坑不在写法，而在字体支持与样式层叠的隐性冲突。调得动的粗细，未必真能渲染出来；看得见的加粗，未必是浏览器按你写的数值执行的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
