Bootstrap 5.3+ 的 fs-1 到 fs-6 基于 clamp(min, preferred, max) 实现响应式字号，如 fs-4 生成 font-size: clamp(1.25rem, 1.1875rem + 0.1875vw, 1.375rem)，小屏用下限、大屏趋近上限、中间线性插值；旧版仅媒体查询切换固定值。
Bootstrap 5 的 fs-1 到 fs-6 不是“流式缩放”，而是断点切换 + clamp() 组合的响应式字号方案；直接写 fs-4 会在所有屏幕生效，加前缀如 fs-md-3 才触发断点覆盖逻辑。
fs-1 到 fs-6 的实际计算逻辑是什么
它们不是固定像素值，而是基于 clamp(min, preferred, max) 的 CSS 函数，例如 fs-4 默认生成：
font-size: clamp(1.25rem, 1.1875rem + 0.1875vw, 1.375rem);
这意味着：小屏用下限（1.25rem），大屏趋近上限（1.375rem），中间按视口宽度线性插值。这个行为只在 Bootstrap 5.3+ 启用，旧版（5.0–5.2）仅靠媒体查询切换固定值。
-
fs-1~fs-6的clamp()范围不同，fs-1的 min/max 差值更大，缩放感更明显 - 所有
fs-*类只设置font-size，不修改font-weight或line-height - 如果你禁用了 Bootstrap 的 CSS 自定义属性（比如删了
:root中的--bs-font-size-base等），clamp()表达式会失效，回退为浏览器默认
如何正确叠加断点前缀（如 fs-sm-3、fs-lg-2）
断点前缀表示“从此断点起生效”，不是“仅在此断点生效”。比如 fs-4 fs-md-3 fs-lg-2 的含义是：
- xs 和 sm：用
fs-4的clamp()规则 - md 及以上：覆盖为
fs-3的规则 - lg 及以上：再覆盖为
fs-2的规则
关键陷阱：
- 顺序不能颠倒——写成
fs-lg-2 fs-md-3 fs-4会导致fs-4在所有断点都被覆盖（CSS 层叠优先级相同，后声明者胜出） - 断点必须连续递增，跳过
sm直接写fs-md-3没问题，但写了fs-sm-4 fs-lg-2而漏掉md，那么 md 断点会沿用fs-sm-4，而非自动降级 -
xs没有前缀，fs-5就等价于fs-xs-5，别写成fs-xs-5（不存在该类）
为什么有时字体没变？常见失效场景
不是所有情况都能靠 fs-* 类直观生效，尤其当父容器或全局样式干扰时：
- 父元素设置了
font-size: 0.875rem，而你给子元素加fs-4（默认1.25rem），实际计算值是1.25 × 0.875rem = 1.09375rem，视觉上可能看不出变化 - 使用了
.h1~.h6标题类，它们自带font-size和font-weight，会与fs-*冲突；建议二选一，不要混用 - 自定义了
$font-size-rootSass 变量但没重新编译 CSS，导致生成的clamp()基准错乱 - 在内联样式里写了
style="font-size: 16px"，它会强制覆盖所有fs-*类（CSS 特性权重更高）
需要微调时，该改哪里
如果你发现默认的 fs-3 在中屏下还是偏大/偏小，不建议手写媒体查询覆盖，而是利用 Bootstrap 的定制能力：
- 修改 Sass 变量：
$font-sizes（控制fs-1~fs-6的基础值）、$font-size-scale（控制clamp()的缩放系数） - 调整断点阈值：
$grid-breakpoints改了md的像素值，fs-md-3的触发点就跟着变 - 如果只是单个组件要特殊处理，直接加一个自定义类，比如
.stat-number，然后在 CSS 里写.stat-number { font-size: clamp(1.125rem, 1.0625rem + 0.125vw, 1.25rem); }，比堆砌多个fs-*更可控
真正容易被忽略的是：fs-* 的 clamp() 行为依赖浏览器对函数的支持，Safari 13.1+、Chrome 84+、Firefox 79+ 才完整支持；老版本会降级为 min 值，看起来像“没响应”。
