Bootstrap不支持fw-*类的响应式变体，因其未提供fw-sm-bold等断点后缀类；需通过自定义媒体查询或Sass混合宏配合断点变量实现不同屏幕下的font-weight切换。
bootstrap 本身不提供「不同断点下切换 font-weight」的原生工具类，fw-bold、fw-normal 等类是静态的，不会随屏幕尺寸自动变化。
为什么直接用 fw-* + 断点后缀 不生效
Bootstrap 的字体粗细类（如 fw-bold）没有响应式变体——你写 fw-sm-bold 或 fw-lg-normal 是无效的，CSS 中根本不存在这些类名。它的响应式工具类只对 font-size（fs-*）、text-align（text-sm-start）、display（d-md-none）等少数几类支持断点后缀，fw- 不在其中。
正确做法：用断点类组合 + 自定义 CSS
必须自己写媒体查询或利用 Bootstrap 的断点类配合内联样式/自定义类。推荐用后者，更易维护：
- 给元素同时加多个断点类，例如
fw-normal fw-md-bold fw-xl-light—— 但注意：这行不通，因为fw-类内部都是!important，后写的会覆盖前写的，最终只生效最后一个 - 真正可行的是：定义自己的响应式字体粗细类，比如
fw-responsive，然后在 CSS 中按断点写规则 - 最稳妥的方式是直接用 Bootstrap 的断点媒体查询变量（如果你用 Sass）：
@include media-breakpoint-up(md) { .text-fw-md-bold { font-weight: 700; } } @include media-breakpoint-up(xl) { .text-fw-xl-light { font-weight: 300; } } - 纯 CSS 引入者可抄 Bootstrap 官方断点值：
@media (min-width: 768px) { .fw-md-bold { font-weight: 700; } }
容易踩的坑：font-weight 数值 vs 关键字混用
不同浏览器对 font-weight 关键字（如 bold、normal）映射的实际数值可能不一致，尤其在自定义字体中。建议统一用数字：
-
font-weight: 400对应常规（相当于normal） -
font-weight: 600或700对应加粗（fw-bold实际就是700） - 避免混用
bold和600在同一项目中，否则断点切换时可能出现意外回退 - 某些 Google Fonts（如 Inter、Roboto Flex）支持可变字体轴，此时
font-weight: 100–900可平滑过渡，但普通 Web 字体不支持
替代方案：用 font-variation-settings 做精细控制（进阶）
如果你用的是支持可变字体的字体（如 font-family: 'Inter', sans-serif;），且目标浏览器支持（Chrome 62+、Firefox 63+、Safari 13.1+），可以用 CSS 变量驱动粗细变化：
.text-fluid-weight {
font-variation-settings: "wght" 400;
}
@media (min-width: 768px) {
.text-fluid-weight {
font-variation-settings: "wght" 600;
}
}
@media (min-width: 1200px) {
.text-fluid-weight {
font-variation-settings: "wght" 700;
}
}这个方案比单纯切换 font-weight 更细腻，但依赖字体本身是否打包了 weight 轴——多数 Bootstrap 默认字体栈（"Helvetica Neue", Helvetica, Arial, sans-serif）不支持，得显式换字体。
