Bootstrap 5 默认启用RFS，内置clamp()响应式字体（如fs-4对应clamp(1.25rem, 4vw, 1.5rem)），无需手写calc()；手动calc()易致兼容问题、无边界控制且易被覆盖，应优先使用fs-*及断点变体类。
Bootstrap 5 默认已启用 RFS，无需额外配置，但直接写 calc() 是在绕过它、重复造轮子，还容易出兼容问题。
为什么不用自己写 calc() 实现响应式字体
RFS 在 Bootstrap 5 中已深度集成，所有 .h1–.h6、.display-*、.fs-* 类默认就带 clamp() 表达式（如 clamp(1.25rem, 4vw, 1.5rem)），不是靠一堆 calc() + 媒体查询模拟。自己手写 calc(1.5rem + 0.8vw) 会遇到：
-
calc()在旧版 Safari（≤13.1）和 IE 中完全不生效，降级后变成浏览器默认字号（16px），布局可能错乱 - 无法自动设置最小/最大边界，小屏缩太小、大屏撑太满，得手动补
@media或@supports -
calc()不支持断点分层（比如“仅在 md+ 生效”），而fs-md-4这类类名天然支持 - 你写的
calc()规则优先级常被 Bootstrap 框架样式覆盖，尤其在组件内部（如.alert、.table）
真正该用的：fs-* 工具类及其断点变体
Bootstrap 5.3+ 提供了开箱即用的响应式字号工具类，核心是 clamp() + 断点前缀，不是 calc()。
-
fs-1到fs-6：基础字号类，全断点生效，例如fs-4对应font-size: clamp(1.25rem, 4vw, 1.5rem) -
fs-sm-3：表示“从sm断点起才启用fs-3的字号”，更小屏幕回退到未加前缀的类或默认值 - 可叠加使用：
fs-2 fs-md-3 fs-lg-4—— xs/sm 用fs-2，md/lg 用fs-3，xl/xxl 用fs-4 - 注意顺序：必须按断点从小到大写，否则 CSS 层叠会覆盖掉前面的规则
什么时候才需要碰 calc() 或 clamp()
只有两种真实场景值得手动干预：
立即学习“前端免费学习笔记（深入）”；
- 想自定义某段文字的缩放曲线（比如希望它比
fs-4更激进），那就直接写：font-size: clamp(1rem, 5.2vw, 2.75rem);，并加@supports (font-size: clamp(1rem, 1vw, 1rem)) { ... }降级 - 第三方组件（如
select2、flatpickr）没用 Bootstrap 字号类，又不想改源码，可在其容器上加自定义 class 并手动设clamp() - 别在全局
p、span上硬套calc()—— 它们不在 RFS 覆盖范围内，但强行加反而破坏语义和可维护性
RFS 不生效的三个高频原因
写了 fs-lg-5 却没变化？先排查这些：
- 你用的是 Bootstrap 5.2 或更早版本 ——
fs-*-*断点变体是 5.3 才正式加入的 -
:root的font-size被 JS 或 CSS 修改过（比如设成18px），导致clamp()里所有rem值基准偏移，整个缩放比例失真 - 浏览器不支持
clamp()（IE 全系、Safari ≤13.1、部分安卓 WebView），此时整条font-size声明被忽略，回退为浏览器默认，看起来像“没生效”
真正麻烦的不是怎么写，而是忘了 clamp() 是个有明确兼容边界的现代特性 —— 它不是万能 fallback，而是需要主动兜底的明确契约。
