Bootstrap 5 不支持断点级 font-weight 类，需用媒体查询自定义类（如 .text-weight-md-up-bold）或 Sass 批量生成静态类；推荐媒体查询方案，避免 JS 动态切换，注意 font-weight 数值兼容性。
Bootstrap 5 怎么用响应式类控制 font-weight？
Bootstrap 5 原生不提供像 .fw-sm-bold 或 .fw-lg-normal 这样的断点级字体粗细类。它只有一套全局的 .fw-light、.fw-normal、.fw-bold 等类，应用后对所有屏幕尺寸生效。
想实现「小屏用 normal，大屏用 bold」，必须自己扩展或用 CSS 媒体查询覆盖。
用自定义 CSS 媒体查询覆盖 font-weight
这是最直接、可控性最强的方式，避免依赖 JS 或复杂工具链。
- 在你的项目 CSS（或
<style>块）中写媒体查询，例如：@media (min-width: 992px) { .text-weight-md-up-bold { font-weight: 700 !important; } } @media (max-width: 991.98px) { .text-weight-md-up-bold { font-weight: 400 !important; } } - 注意 Bootstrap 断点值：
sm是 576px，md是 768px，lg是 992px，xl是 1200px —— 写媒体查询时用实际像素值，别抄错 - 加
!important是因为 Bootstrap 的.fw-bold本身带!important，不加容易被覆盖失效 - 类名自己命名，比如
.text-fw-sm-normal-lg-bold，语义清晰比缩写更重要
用 Sass 变量 + 自定义响应式工具类（适合已用 Sass 的项目）
如果你的项目已引入 Bootstrap 源码（Sass 版），可以复用它的断点变量和工具类生成逻辑。
- 在自定义 Sass 文件中引用：
@each $breakpoint, $value in map-get($grid-breakpoints, 'breakpoints') { @include media-breakpoint-up($breakpoint) { .fw-#{$breakpoint}-bold { font-weight: 700; } } } - 编译后会生成类似
.fw-md-bold、.fw-lg-bold的类，但它们仍是静态类，不是“条件切换”——你仍需手动在 HTML 中组合使用，例如：<p class="fw-sm-normal fw-lg-bold">文字</p> - 这种方式本质是批量生成多个独立类，而非单个类响应变化；真正“一个类控制多断点”的行为，仍需靠 CSS 媒体查询驱动
为什么不用 JavaScript 动态切换 class？
有人想监听 window.matchMedia 或 resize 事件来切 class，但没必要，且容易出问题：
- 字体粗细是纯样式问题，CSS 媒体查询原生支持、零 JS 开销、服务端渲染友好
-
resize事件频繁触发可能卡顿，尤其低端设备；matchMedia虽好，但增加复杂度，还得多维护 JS 逻辑 - SSR 或静态站点中 JS 尚未加载时，文字会先按默认样式渲染，再闪动一次，体验差
- 除非你有极特殊需求（比如根据用户偏好设置动态调整，且该偏好无法用 CSS 查询表达），否则绕开 CSS 直接上 JS 是走弯路
真正容易被忽略的是：font-weight 的数值兼容性。别写 font-weight: bolder 或 lighter，它们相对父元素计算，跨层级易失控；优先用具体数字（如 400、600、700）或 Bootstrap 的命名类对应值，确保行为可预测。
