最稳妥方式是修改根元素 font-size：Bootstrap v4 用 html { font-size: 16px; }，v5 推荐 :root { font-size: 18px; }，使所有 rem 单位自动等比缩放，line-height 和 margin 同步变化，保持排版比例协调。
改全局字号最稳妥的方式是动 :root 或 html
直接重写 h1、p 的 font-size 会导致比例失衡：比如你把 p 改成 18px，但 .lead 还是按默认 1.25rem 算（≈20px），h2 的 2rem 又变成 32px，视觉节奏全乱。Bootstrap v4 用 html { font-size: 16px; }，v5 推荐 :root { font-size: 18px; }——所有 rem 值自动等比放大，line-height: 1.5 和 margin-bottom: 1rem 也同步变高/变宽，排版比例不变。
常见错误：
– 在自定义 CSS 里只写 p { font-size: 18px; }，没动根字体
– JS 里用 getComputedStyle(document.documentElement).fontSize 读值，却忘了它会随 :root 变化
– 项目用了 vw 媒体查询（如 max-width: 768px），误以为改根字体会影响断点逻辑（其实不影响）
fs-* 类适合单个元素快速调尺寸
fs-1 到 fs-6 是 Bootstrap 5 提供的纯尺寸类，只设 font-size，不碰 font-weight 或 line-height，和语义化的 .h1～.h6 分开管理。适合这种场景：
- 后台表格里操作按钮文字要小一号，但不能影响整页
p - 卡片标题想用
<div> 语义，但尺寸要接近 <code>h4 - 临时覆盖某段文案，又不想动全局变量
注意：
– fs-4 ≈ h4 大小（1.5rem），fs-6 ≈ small（0.875rem）
– 它们不响应式缩放，除非加断点后缀，比如 fs-sm-5 fs-md-4
– 如果同时写了 style="font-size: 16px"，内联样式会覆盖 fs-*（CSS 特异性规则）
需要真正响应式缩放？得用 RFS 或 clamp()
纯 CSS 的 fs-* 类或改 :root 都是“一步到位”，没有中间过渡。如果希望字体在 375px 到 1920px 之间平滑变化，两个主流方案：
RFS（仅 Sass 项目可用）：
– 必须在 @import "bootstrap" 前启用：$enable-responsive-font-sizes: true;
– 所有字号要用 font-size(20px) 包裹，不能写死 font-size: 20px
– 默认缩放区间是 1200px 起，小于该宽度就锁死在最小值（约 1rem），不是全视口生效
clamp()（现代浏览器通用）：
– 写法：font-size: clamp(1.125rem, 4.5vw, 2.25rem);
– 1.125rem 是小屏底线，2.25rem 是大屏上限，4.5vw 控制中间线性缩放
– 不依赖构建工具，直接写在 CSS 里就行，但 IE 完全不支持，需用 @supports 降级
表格、组件内文字怎么同步缩放
Bootstrap Table、Alert、Card 等组件默认不走 RFS，因为它们的字体变量（如 $table-font-size）没被 font-size() 包裹。想让表格文字也响应式，必须在 Sass 中重定义变量：
$table-font-size: font-size(16px);@import "bootstrap";
别这么干：
– .table { font-size: font-size(16px); }（CSS 层叠优先级不够，会被框架样式覆盖）
– 直接给 .bootstrap-table 加 style="font-size: 16px"（破坏可维护性，且不响应）
– 期望第三方插件（如 select2）自动跟随（它们完全不受 Bootstrap 字体系统控制）
容易被忽略的一点：display-* 类（如 display-4）已内置 RFS，但 .h1 类没有——如果你用 <p class="h1"></p> 模拟标题，它不会响应式缩放，得手动包一层 font-size() 或换回原生 <h1></h1> 标签。
