在HTML中调整按钮文本粗细的技巧-html教程-PHP中文网

font-weight设为600无效，主因是字体文件未提供该字重；浏览器仅识别100–900整百值及bold等关键字，且bold比700更兼容；需通过fonts面板验证实际加载字重，并确保@font-face声明匹配。

在html中调整按钮文本粗细的技巧

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 或触发伪粗（模糊、发虚）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

尤其在中文字体或某些 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);
}

注意点：