<p>Bootstrap 5 不支持 fw-* 类的响应式断点变体，需通过自定义媒体查询或 Sass 混合宏实现不同断点下的 font-weight 切换；推荐定义如 text-fw-sm-bold 的自定义类并配合 @media 或 @include media-breakpoint-up(sm) 控制。</p>
Bootstrap 5 如何用响应式工具类控制字体粗细
Bootstrap 5 原生不提供 font-weight 的断点级响应类（比如 fw-bold-sm），直接写 fw-bold 会全局生效，无法按屏幕尺寸切换粗细。必须结合自定义 CSS 或利用现有断点类组合实现。
- 推荐做法：用
text-sm-bold这类自定义类名 + 媒体查询，避免污染全局或重复写样式 - 不要试图复用
fw-*类叠加，Bootstrap 不支持fw-normal d-sm-inline fw-bold d-md-none这种逻辑——d-*控制显示/隐藏，不是切换样式 - 若只改粗细，可借用
text-*系列的断点变体（如text-sm-bold）并配合@include media-breakpoint-up(sm)定义
如何为不同断点设置独立 font-size（非 rem 比例缩放）
Bootstrap 的 fs-* 类（如 fs-4）是固定值（fs-4 = 1.25rem），不响应断点。要实现「小屏 16px、中屏 18px、大屏 20px」这类精确控制，得自己写媒体查询或使用 clamp()。
-
fs-5在所有断点下都是1.5rem，不会随sm/lg变化 - 安全做法：定义类如
fs-responsive，内部用font-size: clamp(1rem, 2.5vw, 1.25rem);，兼顾流动性和上限 - 若需严格像素控制（如设计稿要求 14px/16px/18px），必须手写媒体查询：
@media (max-width: 575.98px) { .fs-xs { font-size: 14px; } } @media (min-width: 576px) and (max-width: 991.98px) { .fs-sm { font-size: 16px; } } @media (min-width: 992px) { .fs-md { font-size: 18px; } }
为什么不能直接组合 fs-4 和 fw-bold 实现响应式效果
因为 Bootstrap 的响应式类（如 d-none d-md-block）只控制元素显隐，而 fs-*、fw-* 是静态样式类，没有内置断点变体。你写 fs-4 fw-bold，它在所有尺寸下都生效。
- 错误示例：
<p class="fs-4 fw-bold d-sm-none d-md-block">文字</p>→ 这只是让文字在sm下隐藏，在md+下显示，且始终是fs-4+fw-bold - 正确思路：要么用多个
<span>分别加不同类并配合d-*-none/d-*-block切换（冗余 DOM），要么用自定义类封装媒体查询 - 性能提示：过多的
d-*-none切换会导致重排，尤其在移动端频繁触发 resize 时；优先用 CSS 媒体查询而非 display 切换
一个轻量级自定义方案（推荐直接复制使用）
在你的 CSS 文件末尾加这段，就能用 text-fw-sm-bold、text-fs-lg-20 这类语义化类名：
.text-fw-sm-bold { font-weight: normal; }
@media (min-width: 576px) { .text-fw-sm-bold { font-weight: bold; } }
<p>.text-fs-lg-20 { font-size: 16px; }
@media (min-width: 992px) { .text-fs-lg-20 { font-size: 20px; } }</p><p>.text-fs-clamp { font-size: clamp(1rem, 2.5vw, 1.25rem); }然后 HTML 中：<p class="text-fw-sm-bold text-fs-lg-20">标题文字</p>
注意：clamp() 在 IE 中不支持，如果必须兼容 IE，只能退回纯媒体查询写法。
