bootstrap 5 不支持 fw-sm-bold 等断点专属字体粗细类；fw-类断点前缀（如 fw-md-bold）表示“从该断点起生效”，需按断点从小到大顺序书写以避免层叠冲突，否则易失效。
Bootstrap 5 原生不支持 fw-sm-bold 这类断点专属字体粗细类——写了也不会生效，因为框架压根没定义这些类名。
为什么 fw-bold 加断点后缀（如 fw-md-bold）看似能用，但容易出错
Bootstrap 确实支持带断点前缀的 fw- 类（如 fw-md-bold），但它不是“在 md 断点生效”，而是“从 md 断点起（含）开始应用该粗细”，且依赖 CSS 层叠顺序。常见错误是写反顺序或混用冲突值：
-
fw-bold fw-md-light：无效 ——fw-bold等价于fw-xs-bold，从最小断点起就设定了font-weight: 700，后续fw-md-light无法覆盖它（除非选择器权重更高） -
fw-lg-bold fw-md-normal：md 和 lg 都显示 bold —— 因为fw-lg-bold在 lg+ 生效，而 md 断点没有被显式“截断”，会继承其声明的值 - 正确顺序必须从小到大：
fw-light fw-md-normal fw-lg-bold，这样每个断点才按预期切换
纯 CSS 媒体查询是最稳妥的响应式 font-weight 控制方式
如果你需要精确控制、避免层叠陷阱，或想用非标准字重（比如 550 或可变字体轴），直接写媒体查询更可靠。Bootstrap 官方断点值可直接复用：
@media (min-width: 768px) {
.text-md-bold {
font-weight: 700;
}
}
@media (min-width: 992px) {
.text-lg-semibold {
font-weight: 600;
}
}
注意：
- 不要给这些自定义类加
!important—— Bootstrap 的fw-类用了!important，但你的媒体查询规则只要选择器明确（如.text-md-bold），就能自然覆盖 - 统一用数字值（
300、400、600、700），避免混用bold和700，否则不同断点切换时可能因浏览器映射差异导致回退 - 确保字体文件真包含对应字重，否则浏览器会算法模拟，小字号下边缘发虚、字形撑开
用 font-variation-settings 做精细控制（仅限可变字体）
如果你用的是支持可变字体的字体（如 Inter、Roboto Flex），且目标浏览器较新（Chrome 62+、Firefox 63+、Safari 13.1+），可以用 CSS 变量驱动字重平滑过渡：
.text-fluid-weight {
font-variation-settings: "wght" 300;
}
@media (min-width: 768px) {
.text-fluid-weight {
font-variation-settings: "wght" 600;
}
}
这比离散的 fw- 类更灵活，但前提是：
- 字体本身支持
wght轴（查字体文档或用浏览器 DevTools 检查@font-face） - 没在全局重置过
font-variation-settings，否则会被覆盖 - 不兼容 IE 和旧版 Safari —— 必须有降级方案（如 fallback 到
fw-light）
真正难的不是写几行 CSS，而是判断「是否真需要断点切换字重」——多数场景下，调整字号或布局比改粗细更能提升可读性；一旦决定切，就必须盯紧字体加载状态和浏览器实际渲染效果，而不是只看类名有没有加上。
