Bootstrap如何让文字在断点下显示不同的字体粗细及大小

<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 或利用现有断点类组合实现。

1. 推荐做法：用 text-sm-bold 这类自定义类名 + 媒体查询，避免污染全局或重复写样式
2. 不要试图复用 fw-* 类叠加，Bootstrap 不支持 fw-normal d-sm-inline fw-bold d-md-none 这种逻辑——d-* 控制显示/隐藏，不是切换样式
3. 若只改粗细，可借用 text-* 系列的断点变体（如 text-sm-bold）并配合 @include media-breakpoint-up(sm) 定义

如何为不同断点设置独立 font-size（非 rem 比例缩放）

Bootstrap 的 fs-* 类（如 fs-4）是固定值（fs-4 = 1.25rem），不响应断点。要实现「小屏 16px、中屏 18px、大屏 20px」这类精确控制，得自己写媒体查询或使用 clamp()。

1. fs-5 在所有断点下都是 1.5rem，不会随 sm/lg 变化
2. 安全做法：定义类如 fs-responsive，内部用 font-size: clamp(1rem, 2.5vw, 1.25rem);，兼顾流动性和上限
3. 若需严格像素控制（如设计稿要求 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，它在所有尺寸下都生效。

1. 错误示例：<p class="fs-4 fw-bold d-sm-none d-md-block">文字</p> → 这只是让文字在 sm 下隐藏，在 md+ 下显示，且始终是 fs-4 + fw-bold
2. 正确思路：要么用多个 <span> 分别加不同类并配合 d-*-none/d-*-block 切换（冗余 DOM），要么用自定义类封装媒体查询
3. 性能提示：过多的 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; } }

.text-fs-lg-20 { font-size: 16px; } @media (min-width: 992px) { .text-fs-lg-20 { font-size: 20px; } }

.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，只能退回纯媒体查询写法。