<p>Bootstrap 5 原生不支持 fw-sm-bold 等断点专属字体粗细类，因其未定义此类名；需通过媒体查询自定义类（如 .text-md-bold）并按断点从小到大顺序应用，统一使用 font-weight 数字值（400/600/700），避免与原生 fw-* 类混用导致权重冲突。</p>
Bootstrap 5 原生不支持 fw-sm-bold 这类断点专属字体粗细类——写了也不会生效，因为框架压根没定义这些类名。想实现“小屏 normal、大屏 bold”，必须自己补 CSS，而不是硬套 fs-* 的写法。
为什么 fw-bold 加断点后缀看似能用但容易翻车
Bootstrap 确实允许你写 fw-md-bold 这样的类，但它不是“仅在 md 断点生效”，而是“从 md 断点起（含）开始应用该粗细”，且完全依赖 CSS 层叠顺序。常见错误包括：
-
fw-bold fw-md-normal：结果全屏都是 bold——因为fw-bold等价于fw-xs-bold，从最小断点起就锁死了font-weight: 700，后续类无法覆盖 -
fw-lg-bold fw-md-normal：md 和 lg 都显示 bold——fw-lg-bold在 lg+ 生效，但 md 断点没被显式“截断”，会继承其声明值 - 类名顺序写反：必须从小到大写，比如
fw-light fw-md-normal fw-lg-bold；写成fw-lg-bold fw-md-normal就失效
怎么用自定义 CSS 实现可靠响应式字重
最稳妥的方式是绕过工具类，直接用媒体查询定义语义类。Bootstrap 官方断点值可直接复用，无需 Sass 编译：
@media (min-width: 768px) {
.text-md-bold {
font-weight: 700;
}
}
@media (min-width: 992px) {
.text-lg-semibold {
font-weight: 600;
}
}
然后在 HTML 中使用：<p class="text-md-bold text-lg-semibold">文字</p>。注意：
- 不要混用
fw-*类和自定义类，避免权重冲突 - 统一用数字值（
400/600/700），别混用bold和600，否则断点切换时可能回退 - 如果用了 Google Fonts（如 Inter、Roboto Flex），确认字体文件是否真包含对应字重——只加载了
wght@400却用fw-bold，浏览器会模拟加粗，导致字形发虚
什么时候该放弃响应式字重，改调字号或布局
实践中，用户想“断点切字重”，往往真实诉求其实是可读性或视觉层级问题：
- 小屏上加粗反而降低可读性（尤其细长段落），不如加大
fs-*或调整行高 - 斜体（
fst-italic）在小屏启用会干扰屏幕阅读器，且对移动端阅读体验不友好 - 如果目标是标题强调，优先考虑用
fs-*+ 断点叠加，比动font-weight更安全、更符合排版逻辑
真正需要响应式字重的场景极少，一旦决定做，就得盯紧字体文件支持、CSS 层叠顺序和 DevTools 里的 Computed 面板——那里才能看到 font-weight 是真变了，还是只是样式表里写了而已。
