Bootstrap表单标签Label的字体权重如何用CSS修改？-css教程-PHP中文网

直接修改 .form-label 的 font-weight 即可，但需注意：避免视觉失衡、确保字重有效且字体支持、排查覆盖与加载顺序问题，推荐用 :root 变量统一控制并搭配 line-height 和 letter-spacing 优化观感。

bootstrap表单标签label的字体权重如何用css修改？

Bootstrap 4/5 中 .form-label 默认用 font-weight: 600（不是 bold），视觉上比普通文本重一点。想调轻或加粗，直接覆盖即可，但要注意三点：

单独设 font-weight: 400 可能让 label 和旁边 input 的视觉重量不匹配，尤其搭配 .form-control（默认也是 400）时容易显得“没重点”
font-weight 数值必须是有效值：100–900 或关键字（normal/bold），写 lighter 或 bolder 容易因继承链不可控而失效
如果项目用了自定义字体（如 Inter、Noto Sans），确保该字体实际支持你写的字重——比如 Inter 的 300 和 700 是完整字重，但 250 就不存在，浏览器会 fallback 到最近可用值

常见原因不是 CSS 写错，而是被更高优先级规则覆盖或字体本身不支持：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.form-label 在 Bootstrap 5 中被声明为 .form-label { font-weight: 600; }，如果你的自定义 CSS 在 Bootstrap 之前加载，这条规则会被覆盖
某些主题或 UI 库（如 AdminLTE）会额外给 .form-label 加 !important，此时需提升选择器权重，例如用 .my-form .form-label 或 form .form-label
用了 Web Font 但只加载了 Regular（400）和 Bold（700）两个字重，却写了 font-weight: 600 —— 浏览器找不到对应字重，会退回到 400 或 700，造成“改了等于没改”

Bootstrap 5.3 开始，部分组件开始读取 CSS 变量，虽然 .form-label 没直接绑定变量，但你可以用 :root 建立自己的控制层，避免散落样式：

:root {
  --bs-form-label-font-weight: 500;
}
.form-label {
  font-weight: var(--bs-form-label-font-weight);
}

这样改一处，所有 .form-label 同步响应；升级 Bootstrap 也不怕规则被重置
如果同时要改字体族、字号，可以一并定义 --bs-form-label-font-family 和 --bs-form-label-font-size，保持风格一致
注意：这个变量名是自定义的，Bootstrap 官方不提供 --bs-form-label-* 系列，所以必须自己声明并显式引用

只调 font-weight 容易让 label 文字“发闷”或“发飘”，尤其在小字号（如 fs-6）下更明显：

加粗后若不调 line-height，文字可能贴顶；变细后若不微调 letter-spacing，小字号易糊成一片
推荐组合调整：font-weight: 500; line-height: 1.4; letter-spacing: .02em;
如果 label 后紧跟 <small class="form-text"></small>，它的 font-weight 默认是 400，建议同步设为 .form-text { font-weight: 400; }，避免层级断裂