bootstrap 5 使用 fw-{value} 类名设置字体粗细，如 fw-bold、fw-semibold 等，不再支持 .font-weight-bold；需确保字体文件本身包含对应字重，否则仅 css 生效但渲染异常。
Bootstrap 5 中 font-weight 类名怎么用
Bootstrap 5 已移除 .font-weight-bold 这类旧命名，统一改用 fw-{value} 命名规范。如果你在项目里写 .font-weight-bold 却没生效，大概率是用了 Bootstrap 5+ 但参考了旧文档。
可用值包括：fw-light、fw-lighter、fw-normal、fw-semibold、fw-bold、fw-bolder。注意：没有 fw-thin 或 fw-black —— 这些需手动定义 CSS。
-
fw-light对应font-weight: 300（前提是字体本身支持） -
fw-semibold是新增的，对应600，填补了normal（400）和bold（700）之间的空档 -
fw-lighter和fw-bolder是相对值，依赖父元素权重，嵌套时行为易失控，慎用于复杂布局
为什么加了 fw-bold 字体还是不粗
最常见原因是字体文件本身不包含 bold 字重。比如你引入的是 Inter 的 regular 版本，那即使加了 fw-bold，浏览器也只能模拟加粗（出现毛边、字形变形）。
验证方式：打开 DevTools → Elements 面板 → 看 Computed 标签页里的 font-weight 是否真实变为 700；再看 font-family 实际加载的是哪个文件（常显示为 inter-var-latin.woff2 这类），确认它是否含 weight 700 支持。
- Google Fonts 引入时要显式加
&display=swap&family=Inter:wght@400;700 - 本地字体要用
@font-face分别声明不同font-weight对应的文件路径 - Bootstrap 的
fw-*类只是设 CSS 属性，不负责提供字体资源
自定义 font-weight 数值类（比如 fw-500）
Bootstrap 默认不生成 fw-500 这类数字类名，但可以通过 Sass 变量扩展。修改 $font-weight map 后重新编译，或直接在自定义 CSS 中补全：
.fw-500 { font-weight: 500 !important; }
.fw-800 { font-weight: 800 !important; }
注意加 !important 是因为 Bootstrap 原生类优先级高；若用 Sass 方式，则需确保你的自定义样式在 Bootstrap CSS 之后加载。
- 不要覆盖
fw-normal或fw-bold的默认值，否则会影响组件（如btn、badge）的内置样式 - 数字类名无法响应式（比如
fw-500-md），如需断点控制，得手写媒体查询
和 utility API 配合使用时的冲突点
当你同时用 fw-bold 和 text-primary 这类文字颜色类时，一般没问题；但若叠加了 text-decoration-underline，下划线位置可能因字重变化而偏移（尤其在 Chrome 中）。
更隐蔽的问题是：某些第三方组件库（如 Flatpickr、Toast UI）会内联 style="font-weight: 600"，这会盖过 fw-bold 的 class 规则（内联样式优先级更高）。
- 排查时先禁用浏览器插件（如 Dark Reader），它们有时会注入全局 font-weight 覆盖
- 用
getComputedStyle(el).fontWeight在控制台查最终计算值，比只看 Styles 面板更可靠 - 如果必须强制覆盖内联样式，可用
[style] { font-weight: unset !important; }，但这是兜底手段，说明上游组件该升级了
字体粗细看着简单，实际卡在字体资源、CSS 优先级、渲染引擎差异三层上。最容易被忽略的是：你写的类名生效了，但字体文件根本没加载对应字重——这时候调半天 class 没用，得去查 Network 面板里字体请求是否 404 或返回了 wrong weight。
