Bootstrap 5 中 fw-bold 等价于 fw-xs-bold，从最小断点（xs）起全局生效，无法被后续断点类覆盖；实现「小屏细、中屏正常、大屏粗」须按断点从小到大顺序书写：fw-light fw-md-normal fw-lg-bold。
bootstrap 5 原生支持响应式字重，但必须用 fw- 类叠加断点后缀（如 fw-md-bold），不能靠单个 fw-bold 实现「小屏细、大屏粗」——因为 fw-bold 等价于 fw-xs-bold，会锁死所有尺寸。
为什么 fw-bold 一加就全屏变粗？
它本质是 fw-xs-bold，从最小断点（xs，即所有视口）开始生效，后续断点类无法覆盖它。比如写 fw-bold fw-lg-light，fw-lg-light 不会起作用，因为 CSS 层叠中 fw-bold 已经设定了 font-weight: 700，且没有更具体的媒体查询来推翻它。
-
fw-light→font-weight: 300 -
fw-normal→font-weight: 400 -
fw-semibold→font-weight: 600 -
fw-bold→font-weight: 700
所有带断点的变体（如 fw-sm-semibold）只在对应断点及以上生效，且依赖顺序层叠。
怎么写出「小屏细、中屏正常、大屏粗」？
必须从小到大写，让后写的类覆盖前写的：先设 xs 行为，再逐级增强。
-
fw-light：xs 尺寸（默认，无前缀）用 300 -
fw-md-normal：≥768px（md 及以上）升为 400，覆盖前面 -
fw-lg-bold：≥992px（lg 及以上）升为 700，覆盖前两个
完整写法：fw-light fw-md-normal fw-lg-bold。如果写反了（如 fw-lg-bold fw-md-normal），md 和 lg 都会是 bold —— 因为 fw-lg-bold 在 lg+ 生效，而 md 断点没被显式覆盖，会继承更早的 bold 值（来自 fw-lg-bold 的层叠残留）。
Flex 容器里 fw-* 类为啥不生效？
不是类失效，而是字体粗细本身不受布局模式影响；真正出问题的是你误判了作用对象。常见陷阱：
- 给
.d-flex容器加fw-bold，但子元素是<span></span>或<a></a>，它们默认继承父级 font-weight —— 这其实是正常的，不是 bug - 但如果你给子元素单独加了
fw-light，又发现没变细，检查是否父级用了!important或自定义 CSS 强制设了font-weight - Vue/React 中组件透传 class 失败，导致
fw-类根本没落到最终 DOM 元素上
验证方法：打开 DevTools，选中文字元素，看 Computed 标签下 font-weight 最终值和来源。
什么时候该放弃 fw-*，直接写 CSS？
当需要非标准数值（如 500）、流体变化（随视口平滑过渡）或精细控制区间时，fw- 类就不够用了。
- 要
font-weight: 500？Bootstrap 没提供对应类，只能手写：style="font-weight: 500"或自定义 class - 想实现「宽度越宽，字越粗」？用
clamp()不现实（font-weight 不支持），但可用 JS 监听matchMedia动态切换 class - 多个相邻元素需不同字重（如标题粗、副标题细），别堆一堆
fw-类，直接用内联style="font-weight: 600"更清晰
最易被忽略的一点：fw- 类只改 font-weight，不影响 font-size、line-height 或 letter-spacing —— 如果你期望“大屏粗 + 大字号 + 更宽松字距”整体效果，必须把 fs-、lh-、ls- 类也同步配上，且同样注意断点顺序。
