bootstrap 5 原生不支持 fw-sm-bold 等断点后缀字体粗细类，因 fw-* 类均含 !important 且无媒体查询，无法响应式覆盖；需自定义带断点的类（如 text-weight-xs-light）并用媒体查询实现“小屏细、中屏正常、大屏粗”。
Bootstrap 5 原生不支持 fw-sm-bold、fw-lg-normal 这类断点后缀的字体粗细类——写了就无效，浏览器根本找不到对应 CSS 规则。
为什么 fw-bold 一加就全屏变粗，没法响应式？
fw-bold 实质等价于 fw-xs-bold，从最小断点（xs，即所有视口）起生效，且所有 fw-* 类都带 !important，后续断点类无法靠层叠覆盖它。比如写 fw-bold fw-lg-light，fw-lg-light 完全不起作用，因为 font-weight: 700 !important 已经锁死。
-
fw-light→font-weight: 300 -
fw-normal→font-weight: 400 -
fw-semibold→font-weight: 600 -
fw-bold→font-weight: 700
这些类没有媒体查询包裹，纯静态；想“小屏细、中屏正常、大屏粗”，必须自己补 CSS 层级控制。
怎么写出「小屏细、中屏正常、大屏粗」的组合效果？
唯一可靠方式：用多个 fw-* 类按断点从小到大顺序叠加，并依赖 CSS 层叠规则让后写的覆盖前写的——但前提是它们本身得能被覆盖（即不能含 !important）。Bootstrap 原生类含 !important，所以这条路走不通；必须绕开原生类，自定义。
- 正确做法：定义自己的类，如
text-weight-xs-light、text-weight-md-normal、text-weight-lg-bold - 在 CSS 中按 Bootstrap 断点写媒体查询：
@media (min-width: 768px) { .text-weight-md-normal { font-weight: 400; } } @media (min-width: 992px) { .text-weight-lg-bold { font-weight: 700; } } - HTML 中写：
<p class="text-weight-xs-light text-weight-md-normal text-weight-lg-bold">文字</p> - 注意：不要用
!important写自定义类——Bootstrap 的fw-*权重是 1000，你的类只要选择器明确（如单个类名），就能覆盖
为什么别硬套 fs-md-4 的写法去扩展 fw-md-bold？
fs-* 类天然支持断点后缀，是因为 Bootstrap Sass 源码里显式循环生成了 fs-{breakpoint}-{size}；而 fw-* 类压根没这层逻辑，Sass 变量里连 $font-weight-sizes 都没定义，强行仿写要改源码、重编译，得不偿失。
- 字体粗细切换在 UI 中实际需求少——字号、间距、布局适配优先级更高
- 小屏突然切
font-weight: 300易导致可读性下降，尤其在 OLED 屏或弱光环境 - 斜体（
fst-*）同理，fst-sm-italic也不存在，且小屏启用斜体对屏幕阅读器语义有干扰 - 如果真要用，优先考虑可变字体 +
font-variation-settings（如font-variation-settings: "wght" 300;），但需确认字体支持和浏览器兼容性
真正卡住的不是语法，而是 Bootstrap 对 font-weight 的设计哲学：它只提供语义化开关，不预设响应式场景。想精细控制，就得亲手写媒体查询——简单、直接、零构建依赖，反而比折腾 Sass 或 JS 更稳。
