font-weight写对仍不加粗，主因是字体文件未提供对应字重；浏览器仅识别100–900整百值及bold等关键字，bold最稳妥，600等值易被降级为400，需通过fonts面板验证实际加载字重并确保@font-face声明匹配。
font-weight 写对了，按钮文字还是不粗——大概率不是 CSS 没生效，而是字体本身没提供对应字重。
font-weight 值写什么才真正有效
浏览器只认 normal、bold、lighter、bolder 和 100–900 中的整百数（如 400、700），但能否变粗，取决于当前 font-family 是否真包含该档字重。
-
font-weight: bold✅ 最稳妥，语义清晰，浏览器会尽力匹配最接近的“粗体”字形 -
font-weight: 700✅ 等价于bold，适合需要精细控制层级的场景（比如按钮比标题细一点） -
font-weight: "bold"❌ 引号导致语法错误，DevTools 里直接不显示这条规则 -
font-weight: 600⚠️ 可能无效：系统字体（如system-ui、Segoe UI）通常只有400和700两档，600会被降级为400 -
font-weight: 550❌ 非标准值，浏览器就近取整后大概率 fallback 到400
为什么加粗没反应？先查字体是否支持
写了 font-weight: 800 却看起来和 400 没区别，不是 CSS 错了，而是字体文件压根没打包这一档。浏览器不会报错，只会悄悄 fallback 到最近可用值（通常是 700 或 400）。
- 系统字体（Windows 的微软雅黑、macOS 的
-apple-system）基本只支持400和700，800、900几乎无效 - 用 Google Fonts 时，必须显式加载对应字重，例如：
https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800，漏掉800就用不上 - 自定义字体用
@font-face时，font-weight声明值必须和实际.woff2文件的元数据严格一致，否则匹配失败 - 运行时验证：等字体加载完后执行
document.fonts.check('800 Inter')，返回true才说明可用
button 元素上 font-weight 被覆盖的典型场景
即使你写了 button { font-weight: 700; }，也可能没生效——button 是用户代理样式重度干预的元素，很多框架或重置样式会强行设为 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）：强行拉伸字形，导致像素失真。
- 现象：文字变粗了，但笔画边缘毛糙、有锯齿，尤其在 Retina 屏上明显
- 根源：字体文件没提供目标字重，浏览器只能“伪造”，比如把
400拉宽加黑 - 解法：换用真正包含所需字重的字体（如 Inter、SF Pro），或退回到
bold/700这类高概率被原生支持的值 - 临时规避：用
text-shadow: 0 0 1px currentColor加一层微阴影，视觉上缓解模糊感（慎用于小字号）
最容易被忽略的是：你改的不是“按钮的粗细”，而是“当前字体在当前设备上是否允许你这么粗”。所有 font-weight 规则都依赖字体文件的实际能力，而不是 CSS 声明本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
