Bootstrap 5 不支持 fw-* 类的响应式断点后缀，无法实现「小屏细、大屏粗」切换；必须手写媒体查询控制 font-weight，因框架仅提供 fw-light、fw-normal、fw-semibold、fw-bold 等固定档位类，且无 fw-sm-bold 等断点变体。
Bootstrap 5 怎么用 fw-* 类控制不同断点下的字重
bootstrap 5 原生支持响应式字重，但仅靠 fw-bold 这类基础类无法实现「小屏细、大屏粗」的切换——必须叠加断点后缀，且顺序不能错。
它只影响 font-weight，不改变字号、行高或颜色；所有断点类都基于 CSS 层叠生效，所以类名顺序决定最终效果。
-
fw-light（300）、fw-normal（400）、fw-semibold（600）、fw-bold（700）是基础值，对应标准 font-weight 数字 - 加断点后缀如
fw-sm-bold表示「从 sm 断点起应用 bold」，不是「仅在 sm 断点生效」 - 必须从小到大写：例如
fw-light fw-md-semibold fw-lg-bold—— 如果写成fw-lg-bold fw-md-semibold，md 及以上都会被fw-lg-bold覆盖 - 默认断点：xs（无前缀）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px）
为什么直接写 @media 改 font-weight 更灵活
Bootstrap 的 fw-* 类只提供离散档位，没法实现「随宽度渐变字重」或「在 800–1024px 区间用 500」这种精细控制。真要动态调节，得手写媒体查询。
注意：浏览器对 font-weight 的支持有隐性限制——不是所有数值都有效，比如 450、550 多数字体不渲染，实际会就近取整到 400/500/600/700 等可用档位。
- 优先用命名值：
font-weight: normal、font-weight: bold兼容性最稳 - 数字值建议只用 100–900 中的整百数（如 300、400、600、700），避免无效 fallback
- 若需过渡效果，可加
transition: font-weight 0.2s，但部分浏览器（尤其旧版 Safari）不支持 font-weight 动画 - 别在
@media (prefers-reduced-motion: reduce)里强制降级字重——它不触发重排，纯属视觉冗余
自定义字重类时，怎么避免和 Bootstrap 冲突
如果你写了 .fw-500 { font-weight: 500; }，又同时用了 Bootstrap 的 fw-bold，CSS 层叠规则会让后者胜出（因选择器权重相同，后声明者生效）。这不是 bug，是预期行为。
真正安全的做法是：要么全用框架类，要么全自己管；混用时必须提高自定义类的选择器权重，或确保加载顺序可控。
- 推荐方式：在 Bootstrap CSS 加载**之后**引入自定义样式表，保证你的规则能覆盖默认类
- 慎用
!important：它会破坏可维护性，尤其在组件库嵌套场景下容易引发连锁覆盖 - 如果项目用 Sass，直接改变量
$font-weight-normal、$font-weight-bold更彻底，但会影响所有依赖这些变量的组件（如.btn、.alert） - 第三方组件（如
vue-select或react-datepicker）内部文字不会继承你写的fw-*类，得单独加样式或用[class*="fw-"]通配
fw-* 类在哪些元素上会失效
fw-* 类本身只是设置 font-weight，但它可能被其他样式压制。常见失效场景不是类没起作用，而是被更高优先级规则覆盖了。
比如 button 默认有 font-weight: bold 浏览器 UA 样式，而 Bootstrap 的 .btn 又设了 font-weight: 600，这时再加 fw-light 就需要确认是否被 .btn 的规则挡住了。
- 内联样式（
style="font-weight: 700"）永远优先于 class，除非加!important - 使用
font简写属性会重置font-weight，例如font: 16px/1.4 "Arial"会让之前设的fw-bold失效 - 某些字体文件本身不包含完整字重（如只打包了 400 和 700），即使 CSS 写了
font-weight: 600，浏览器也只能模拟或 fallback 到最近可用值 -
small、cite等语义化标签有浏览器默认font-weight，需显式重置才能让fw-*生效
实际项目中，最容易被忽略的是字体文件本身的字重支持范围——光靠 CSS 设置没用，得确认你用的字体（Google Fonts / 自托管woff2）是否真提供了 300、500、600 等档位。否则再精细的响应式字重逻辑，最终都只渲染成 400 或 700。
