fw-bold对应font-weight: 700，fw-light对应300，fw-normal为400，fw-semibold为600；实际渲染效果取决于字体文件是否包含对应字重，否则浏览器会算法模拟导致边缘发虚、字形变形。
bootstrap 5 里加粗或变细文字，不是写 .font-weight-bold 就完事——这个类名在 v5 已废弃，用了也不生效。
fw-bold、fw-light 这些类名到底对应什么值
fw-bold 固定设为 font-weight: 700，fw-light 是 300，fw-normal 是 400，fw-semibold 是 600。它们不是“视觉上粗一点”，而是直接映射 CSS 数值。
常见错误是看到 DevTools 里 font-weight 显示 700，就以为加粗成功了——其实字体文件没提供 weight 700，浏览器只能算法模拟，小字号下边缘发虚、字形撑开。
- 验证方式：打开 DevTools → Elements → Computed 标签页，看
font-family实际加载的是哪个文件（比如inter-var-latin.woff2），再确认该字体是否真支持 700 - Google Fonts 引入时必须显式声明字重：
&family=Inter:wght@400;700 - 本地字体要用
@font-face分别声明不同font-weight对应的文件路径
fw-lighter 和 fw-bolder 为什么嵌套后效果失控
这两个是相对值类，不固定数值，依赖父级当前 font-weight 计算结果。父级是 fw-normal（400），子级用 fw-bolder → 渲染为 700；但如果父级已经是 fw-bold（700），再套一层 fw-bolder，多数浏览器卡在 700 不动，少数可能尝试 900（若字体支持）。
- 三层以上嵌套时行为不可预测，尤其在组件库或 CSS-in-JS 动态插入场景中
-
fw-lighter在父级为 300 时可能降到 100，但绝大多数免费字体根本不提供 100 字重，结果回退到 400，反而比原来还重 - 生产环境建议只用绝对值类：
fw-light、fw-normal、fw-semibold、fw-bold
怎么加 fw-500 或 fw-800 这种数字类
Bootstrap 默认不生成 fw-500 这类数字工具类。你可以手动补：
.fw-500 { font-weight: 500 !important; }
.fw-800 { font-weight: 800 !important; }
加 !important 是因为 Bootstrap 原生类优先级高；若用 Sass 方式，需修改 $font-weight-map 后重新编译，并确保自定义 CSS 在 Bootstrap 之后加载。
- 不要覆盖
fw-normal或fw-bold的默认值，否则会影响btn、badge等组件内置样式 - 数字类名不支持响应式（如
fw-500-md），如需断点控制，得手写媒体查询 - 第三方组件内联
style="font-weight: 600"会盖过fw-类，此时需提高选择器权重或改用!important
最常被忽略的点：Bootstrap 的 fw- 类只设置 CSS 属性，不打包也不加载字体文件。哪怕你写了 fw-black，只要字体没提供 900 字重，它就只是个无效声明。
