font-weight设为600无效，主因是字体文件未提供该字重；浏览器仅识别100–900整百值及bold等关键字，且bold比700更兼容；需通过Fonts面板验证实际加载字重，并确保@font-face声明匹配。
font-weight 写对了，按钮文字还是不粗——大概率不是 CSS 没生效，而是字体本身没提供对应字重。
为什么 font-weight: 600 在按钮上没反应
浏览器只认有限几个值：normal、bold、lighter、bolder，以及 100–900 中的整百数（如 400、700）。但真正能否变粗，取决于你用的字体文件是否真包含这一档字重。
常见问题包括：
- 系统默认字体（如
system-ui、Helvetica）通常只有400和700两档，500或600基本被降级为400 - 用了 Google Fonts 却只写
&family=Inter，没加:wght@400;600;700，浏览器根本不会加载600字重文件 - 本地
@font-face声明漏了font-weight: 600对应的字体文件，或多个字重共用同一个src
验证方法：打开开发者工具 → 选中按钮 → 切到 Fonts 标签页，看实际加载的字体 weight 是多少。
立即学习“前端免费学习笔记（深入）”；
font-weight: bold 比 700 更稳妥吗
是的。bold 是关键字，浏览器会尽力匹配当前字体中最接近的“粗体”字形；而 700 是数值，必须有严格对应的字重声明，否则可能 fallback 到 400 或触发伪粗（模糊、发虚）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
尤其在中文字体或某些 Web Font 中，700 经常不可靠。建议：
- 日常强调用
font-weight: bold，兼容性好、语义清晰、降级行为可预期 - 需要精细控制层级（如按钮比标题细一点）时，才考虑
600，但务必确认字体支持 - 避免写
550、623这类非标准值，浏览器会就近取整，最终大概率还是400
用 CSS 变量统一管理按钮粗细
硬编码 font-weight: 600 在多个按钮类里，后期想调细一点就得全局搜索替换。改用变量更可控：
body {
--fw-btn-default: 600;
--fw-btn-emphasis: 700;
}
.btn {
font-weight: var(--fw-btn-default);
}
.btn--primary {
font-weight: var(--fw-btn-emphasis);
}
注意点：
- 变量值仍用标准档位（
400/600/700），别写520 - 变量名带
fw-前缀，一眼识别用途，避免和颜色、间距变量混淆 - 如果用了自定义字体，变量再漂亮也没用——先检查
@font-face是否声明了对应font-weight
别忽略按钮继承和优先级干扰
按钮文字不粗，有时根本不是 font-weight 的问题：
- 父容器设了
font-weight: 100，子元素写bold也可能不够明显 - 外部 CSS 框架（如 Bootstrap）的
.btn规则权重更高，你的局部style="font-weight: bold"可能被覆盖 - 用了
!important强行覆盖，但后期维护成本高，且容易引发连锁冲突
排查顺序：开发者工具 → 查 Computed 面板里的 font-weight 实际值 → 看哪条规则生效 → 再回 Styles 面板定位来源。最常被跳过的环节，就是没确认字体本身支不支持目标字重。
