<p>Bootstrap 5 原生不支持 fw- 或 fst- 的断点后缀类，fw-md-bold 和 fst-lg-italic 等类名不存在，所有 fw- 和 fst- 类均为全局生效；如需响应式控制，必须通过媒体查询配合自定义语义类实现。</p>
Bootstrap 5 原生不支持 fw- 或 fst- 的断点后缀类
直接写 fw-md-bold 或 fst-lg-italic 不生效——这些类名在 Bootstrap 5 的 CSS 中根本不存在。所有 fw-（如 fw-bold）和 fst-（如 fst-italic）类都是全局应用、无媒体查询，一加就全屏生效。
这不是 bug，是设计选择：font-weight 和 font-style 属于语义性样式，框架默认不鼓励按断点切换；而 font-size（fs-*）、display（d-md-none）等才被赋予响应式能力。
-
fw-bold等价于fw-xs-bold，从最小视口起锁定font-weight: 700 - 写
fw-bold fw-lg-light时，fw-lg-light不会覆盖，因为后者不是 Bootstrap 官方类，浏览器直接忽略 - 斜体尤其要谨慎：
fst-italic在小屏启用可能降低可读性，且对屏幕阅读器语义有干扰
怎么实现「小屏细、中屏正常、大屏粗+斜体」
必须用自定义 CSS + 媒体查询，推荐给元素加一个语义类（如 text-emphasis），然后按断点写规则：
@media (min-width: 768px) {
.text-emphasis {
font-weight: 400;
}
}
@media (min-width: 992px) {
.text-emphasis {
font-weight: 700;
font-style: italic;
}
}
- 断点值严格按 Bootstrap 官方定义：
sm: 576px、md: 768px、lg: 992px、xl: 1200px - 不要用
!important——.text-emphasis这类简单类选择器权重（10）远低于 Bootstrap 工具类（1000），但媒体查询内规则天然具有更高层叠优先级 - 避免混用关键字与数字：
font-weight: bold和font-weight: 700在某些字体下映射不一致，统一用数字更可靠（300/400/600/700）
为什么别硬套 fs- 的思路去扩展 fw-
有人试图仿照 fs-md-4 的逻辑，在 Sass 中手动生成 fw-md-bold 类——技术上可行，但实际代价高、收益低：
- Bootstrap 的
fw-类只有 5 个离散档位（light/normal/semibold/bold/bolder），不像fs-有标尺式尺度，扩展意义有限 - 小屏突然切到
font-weight: 300容易导致文字发虚、可读性下降，尤其在 OLED 屏幕上 - 斜体在移动端长段落中会显著增加阅读负担，多数场景下“断点切斜体”本身就不合理
- Sass 扩展需重编译、引入构建依赖，而纯 CSS 媒体查询零成本、零侵入
真正需要响应式文字表现时，先问自己：是不是该动字号或布局
用户提出“断点切字重/斜体”，背后常是视觉层级没理清。比如标题在小屏挤在一起，想靠加粗突出——更合理的解法可能是：
- 用
fs-类降级字号（fs-4 fs-md-3 fs-lg-2），再配合fw-bold全局加粗 - 小屏改用单行显示 +
text-truncate，大屏展开多行 +fw-semibold - 斜体需求多来自术语或外文，这类内容本身应有语义标签（
<em>或<cite>），而非靠响应式类控制
字体粗细和斜体的响应式切换，不是不能做，而是容易掩盖真正的排版问题——它不像字号或间距那样直接影响信息密度和阅读流，动手前多停两秒，往往比写十行 CSS 更有效。
