Bootstrap框架中的Font-weight粗细调节类

Bootstrap 5 使用 fw-{value} 类名设置字体粗细，如 fw-bold、fw-semibold 等，不再支持 .font-weight-bold；需确保字体文件本身包含对应字重，否则仅 CSS 生效但渲染异常。

Bootstrap 5 中 font-weight 类名怎么用

Bootstrap 5 已移除 .font-weight-bold 这类旧命名，统一改用 fw-{value} 命名规范。如果你在项目里写 .font-weight-bold 却没生效，大概率是用了 Bootstrap 5+ 但参考了旧文档。

可用值包括：fw-light、fw-lighter、fw-normal、fw-semibold、fw-bold、fw-bolder。注意：没有 fw-thin 或 fw-black —— 这些需手动定义 CSS。

• fw-light 对应 font-weight: 300（前提是字体本身支持）
• fw-semibold 是新增的，对应 600，填补了 normal（400）和 bold（700）之间的空档
• fw-lighter 和 fw-bolder 是相对值，依赖父元素权重，嵌套时行为易失控，慎用于复杂布局

为什么加了 fw-bold 字体还是不粗

最常见原因是字体文件本身不包含 bold 字重。比如你引入的是 Inter 的 regular 版本，那即使加了 fw-bold，浏览器也只能模拟加粗（出现毛边、字形变形）。

验证方式：打开 DevTools → Elements 面板 → 看 Computed 标签页里的 font-weight 是否真实变为 700；再看 font-family 实际加载的是哪个文件（常显示为 inter-var-latin.woff2 这类），确认它是否含 weight 700 支持。

• Google Fonts 引入时要显式加 &display=swap&family=Inter:wght@400;700
• 本地字体要用 @font-face 分别声明不同 font-weight 对应的文件路径
• Bootstrap 的 fw-* 类只是设 CSS 属性，不负责提供字体资源

自定义 font-weight 数值类（比如 fw-500）

Bootstrap 默认不生成 fw-500 这类数字类名，但可以通过 Sass 变量扩展。修改 $font-weight map 后重新编译，或直接在自定义 CSS 中补全：

.fw-500 { font-weight: 500 !important; }.fw-800 { font-weight: 800 !important; }

注意加 !important 是因为 Bootstrap 原生类优先级高；若用 Sass 方式，则需确保你的自定义样式在 Bootstrap CSS 之后加载。

• 不要覆盖 fw-normal 或 fw-bold 的默认值，否则会影响组件（如 btn、badge）的内置样式
• 数字类名无法响应式（比如 fw-500-md），如需断点控制，得手写媒体查询

和 utility API 配合使用时的冲突点

当你同时用 fw-bold 和 text-primary 这类文字颜色类时，一般没问题；但若叠加了 text-decoration-underline，下划线位置可能因字重变化而偏移（尤其在 Chrome 中）。

更隐蔽的问题是：某些第三方组件库（如 Flatpickr、Toast UI）会内联 style="font-weight: 600"，这会盖过 fw-bold 的 class 规则（内联样式优先级更高）。

• 排查时先禁用浏览器插件（如 Dark Reader），它们有时会注入全局 font-weight 覆盖
• 用 getComputedStyle(el).fontWeight 在控制台查最终计算值，比只看 Styles 面板更可靠
• 如果必须强制覆盖内联样式，可用 [style] { font-weight: unset !important; }，但这是兜底手段，说明上游组件该升级了

字体粗细看着简单，实际卡在字体资源、CSS 优先级、渲染引擎差异三层上。最容易被忽略的是：你写的类名生效了，但字体文件根本没加载对应字重——这时候调半天 class 没用，得去查 Network 面板里字体请求是否 404 或返回了 wrong weight。