fw-bold 对应 font-weight: 700，fw-light 对应 font-weight: 300；实际渲染效果取决于字体文件是否包含对应字重，否则浏览器会降级为算法加粗或压缩，导致显示异常。
fw-bold 和 fw-light 在 Bootstrap 5 里到底对应什么 font-weight 值
它们不是“加粗”和“变细”的模糊描述，而是明确映射到 CSS font-weight 数值：fw-bold 对应 700，fw-light 对应 300。这跟浏览器默认的 normal（400）和 bold（700）行为一致，但关键在于——这些数值能否真实渲染，取决于你加载的字体文件是否真包含对应字重。
常见误判是看到 class 生效了（比如 DevTools 里显示 font-weight: 700），就以为文字变粗了，其实只是样式声明生效，字体引擎没对应字重可用时，会退化为算法加粗（synthetic bold），导致边缘发虚、字形撑开、行高异常。
-
fw-light要求字体提供 300 字重，例如 Inter Light、Roboto Light；只引入 Roboto Regular 的话，它就只是“看起来淡一点”，实际是浏览器把 400 挤压模拟成 300 -
fw-bold同理：若字体无 700 版本（比如只加载了 Open Sans Regular），浏览器强行加粗，小字号下尤其明显 - 检查方式：打开 DevTools → Elements → 查看 computed 标签页里的
font-family实际加载的是哪个文件，再比对该字体的字重列表
为什么加了 fw-bold 页面上还是不粗
90% 的情况不是 Bootstrap 写错了，而是字体资源没配齐。Bootstrap 只负责写 font-weight，不打包字体文件。
- 用 Google Fonts 引入时，别只写
&family=Inter，要显式加上字重范围，例如：&family=Inter:wght@300;400;500;600;700 - 用本地字体时，确认
@font-face规则中每个font-weight值都指向正确的 .woff2 文件，且font-weight值与文件实际字重一致（不能一个 600 的文件在 CSS 里声明成 700） - 某些字体（如系统 San Francisco 或 Segoe UI）在 Windows/macOS 上原生支持多字重，但 Linux 下常 fallback 到 DejaVu，这时
fw-light就完全失效
fw-lighter 和 fw-bolder 别乱嵌套用
这两个是相对值类名，依赖父元素当前 font-weight 计算结果，不是固定数值。比如父级是 fw-normal（400），子级用 fw-bolder → 渲染为 700；但如果父级已经是 fw-bold（700），再套一层 fw-bolder，浏览器可能按 900 渲染（如果字体支持），也可能卡在 700 不动（多数情况）。
- 嵌套三层以上时，行为不可预测，尤其跨组件传值或用 CSS-in-JS 动态插入时
-
fw-lighter在父级为 300 时可能降到 100，而绝大多数免费字体根本不提供 100 字重，结果就是回退到 400，反而比原来还重 - 生产环境建议只用绝对值类名：
fw-light、fw-normal、fw-semibold、fw-bold
fw-semibold 是 Bootstrap 5 新增的，但它不是万能补丁
fw-semibold 映射到 600，确实填补了 normal（400）和 bold（700）之间的视觉断层，但它的生效前提和 fw-bold 完全一样：字体必须真有 600 字重。
很多开发者以为加了 fw-semibold 就能“温和加粗”，结果发现和 fw-bold 看起来一模一样——大概率是字体只提供了 400 和 700 两个版本，浏览器把 600 当作 700 渲染了。这时候与其硬调类名，不如直接检查字体加载策略，或者用 font-weight: 550 这样的自定义值配合 @supports (font-weight: 550) 做渐进增强。
