Bootstrap框架字体粗细调节类

在使用Bootstrap 5时，字体粗细类名（font-weight）的用法看似简单，但实际效果往往取决于字体资源本身是否支持对应字重。以下从类名规范、常见问题、自定义扩展及冲突处理等方面进行说明。

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，前提是所用字体包含300字重
• fw-semibold为Bootstrap 5新增，对应600，填补了normal（400）与bold（700）之间的空缺
• fw-lighter和fw-bolder是相对值，取决于父元素的权重。在嵌套层级较多时容易导致行为失控，复杂布局中需谨慎使用

添加fw-bold后字体仍不显粗的原因

这种情况十分常见：尽管加了fw-bold，字体外观却无明显变化。问题根源大多在于字体文件本身未包含bold字重。

例如，若引用的Inter仅包含regular版本，即便设置了fw-bold，浏览器也只能通过算法模拟加粗。模拟效果常出现边缘毛刺或字形变形，视觉效果不佳。

验证方法：打开DevTools的Elements面板，查看Computed标签页中font-weight是否为700，同时检查font-family实际加载的字体文件是否包含weight 700支持。

• 使用Google Fonts引入时，URL中需显式添加&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后重新编译。若不便于修改Sass，也可在自定义CSS中补充：

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

为何加入!important？因为Bootstrap原生类优先级较高，不加则容易被覆盖。若采用Sass方式扩展，需确保自定义样式加载顺序在Bootstrap CSS之后。

• 不要覆盖fw-normal或fw-bold的默认值，以免影响按钮、徽章等组件的内置样式
• 数字类名不支持响应式使用，例如fw-500-md并不存在。如需在不同断点切换，只能手动编写媒体查询

与utility API配合使用时可能出现的冲突

大多数情况下，同时使用fw-bold和text-primary等文字颜色类不会出现问题。但若叠加text-decoration-underline，下划线位置可能因字重变化产生偏移，在Chrome中尤为明显。

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

• 排查时，先尝试关闭浏览器插件（如Dark Reader），它们有时会注入全局font-weight覆盖
• 在控制台使用getComputedStyle(el).fontWeight查看最终计算值，比仅看Styles面板更可靠
• 若需强制覆盖内联样式，可用[style] { font-weight: unset !important; }，但这属于兜底方案。优先考虑升级上游组件，更省心

字体粗细问题看似简单，实则卡在三个层面：字体资源、CSS优先级、渲染引擎差异。最易被忽略的是：类名确实生效，但字体文件并未加载对应字重。此时过度调整class无效，不如打开Network面板检查字体请求是否返回404，或是否返回了错误的weight值。