Bootstrap 5.1+ 支持响应式 font-weight 类，语法为 fw-{breakpoint}-{weight}（如 fw-sm-bold），表示从指定断点起生效；未加断点的类（如 fw-bold）全局覆盖；需确保引入完整 CSS、字体文件包含对应字重，并注意媒体查询补位与渲染实际效果。
用 font-weight 响应式类控制不同断点下的字重
Bootstrap 5 自带的 .fw-light、.fw-normal、.fw-bold 等类默认是全局生效的，不随屏幕尺寸变化。想让文字在小屏用细体、大屏用粗体，得靠响应式变体类——它们在 Bootstrap 5.1+ 才完整支持。
- 必须用 Bootstrap 5.1 或更高版本（5.0 不支持
fw-的响应式写法） - 语法是
fw-{breakpoint}-{weight}，比如fw-sm-bold表示从sm断点起生效粗体，fw-md-light表示从md起生效细体 - 断点前缀顺序必须严格：
fw-→ 断点（xs/sm/md/lg/xl/xxl）→ 字重（light/normal/bold/bolder/lighter） - 没写断点的类（如
fw-bold）会覆盖所有断点，优先级高于带断点的类，慎用
常见错误：字体粗度没变化或断点失效
最常遇到的是加了 fw-sm-bold 但小屏下还是细体，或者大屏下突然变粗——这通常不是代码写错，而是 CSS 加载顺序或断点逻辑理解偏差导致的。
- 检查是否引入了 Bootstrap 的完整 CSS（含响应式工具类），精简版（如
bootstrap.min.css但未启用响应式工具）可能缺失断点类 -
fw-sm-bold意味着“在sm及以上断点生效”，不是“仅在sm”，所以如果同时写了fw-bold，它会覆盖所有尺寸 - 自定义字体（如 Google Fonts）没加载对应字重（比如只加载了
400，却设font-weight: 700），浏览器会模拟加粗，效果发虚，这不是 Bootstrap 问题，但容易误判
手动写媒体查询补位更可控
Bootstrap 响应式字重类覆盖不了所有场景，比如想在 md 下用 500，lg 下切到 600，而 Bootstrap 没提供 fw-md-medium 这种类——这时直接写 CSS 更干脆。
@media (min-width: 768px) {
.custom-fw-md {
font-weight: 500;
}
}
@media (min-width: 992px) {
.custom-fw-md {
font-weight: 600;
}
}
- 类名自己定义，避免和 Bootstrap 冲突（别用
fw-开头） - 断点值参考 Bootstrap 默认：
sm: 576px、md: 768px、lg: 992px、xl: 1200px - 如果项目用了 Sass，直接在变量里改
$font-weight-bold等，再配合font-weight函数生成，适合全站统一调整
font-weight 数值 vs 关键字的实际差异
Bootstrap 的 fw-light 对应 font-weight: 300，fw-bold 是 700，但数值和关键字在渲染上并不总等价——尤其当字体本身不支持某档字重时。
-
font-weight: bolder是相对计算，依赖父元素字重，容易失控；fw-bolder同理，慎用于嵌套深的文本 - 用数字（如
500）比关键字（medium）更明确，但前提是字体文件真包含这一档。查字体支持可用浏览器开发者工具的“Computed”面板看实际应用的font-weight - 系统字体（如 -apple-system, system-ui）对
font-weight的映射较宽松，而 Web 字体（如 Inter、Roboto）需显式加载各字重文件，否则 fallback 到浏览器模拟
真正起作用的是字体文件 + CSS 声明 + 浏览器渲染三者共同结果，别只盯着类名是否写对。
