最稳妥方式是修改根元素 font-size：:root { font-size: 18px; }（v5）或 html { font-size: 18px; }（v4），使所有 rem 单位自动按新基准缩放，同时保持 line-height 和 margin 的比例协调。
直接改全局 font-size：用 CSS 自定义根字体最稳妥
bootstrap 的 font-size 默认值因版本而异（v4 是 16px，v5 是 1rem ≈ 16px），但所有文本尺寸都基于 :root 或 html 的字体大小做相对计算。想一统修改 <h1>、<p>、<small> 等所有元素的基准字号，最干净的方式是覆盖根字体——不是去一个个重写 h1 { font-size: ... }。
常见错误现象：只改了 p { font-size: 18px }，结果 .lead 还是 16px，h2 按 1.5rem 算出来还是偏小，响应式断点下更混乱。
- 在自定义 CSS 文件末尾或
<style>块中加：:root { font-size: 18px; }（v5 推荐）或html { font-size: 18px; }（v4 兼容性更好） - 这样所有 rem 单位（如
h1的2.5rem）会自动按新基准缩放，line-height: 1.5也同步变高，排版比例不变 - 注意：若项目用了
vw或媒体查询里写了max-width: 768px等固定值，这个改动不影响响应逻辑；但如果你在 JS 里读取getComputedStyle(document.documentElement).fontSize，值会变
用 Bootstrap 内置工具类快速调整单个文本
不需要动全局，只想让某段 <p> 更大？或者临时让按钮文字变小？Bootstrap 5 提供了 fs-* 工具类（如 fs-1 到 fs-6），它们只设 font-size，不碰 font-weight 或 line-height，和标题类 .h1–.h6 分开管理。
使用场景：后台表格里的操作文案需要比默认 p 小一号，但又不能影响其他段落；卡片标题想用 h3 的语义但尺寸要接近 h4。
-
fs-1≈h1大小（2.5rem），fs-6≈small大小（0.875rem） - 直接加在标签上：
<p class="fs-4">这段文字等同于 h4 尺寸</p>
- 注意：这些类不会响应式缩放（除非你额外配
fs-sm-5 fs-md-4等），也不继承父级font-size，是绝对生效的
重写标题或段落样式时，必须考虑 line-height 和 margin
只改 font-size 很容易让行距塌陷或文字挤在一起。比如把 h1 改成 36px，但没调 line-height，它可能还用默认的 1.2，视觉上就发紧；又或者把 p 字号拉到 18px，但 margin-bottom: 1rem 还是 16px，间距就显得太小。
常见错误现象：改完字号后，段落之间空隙变窄、标题文字贴顶、移动端文字溢出容器。
- v5 中
p默认margin-bottom: 1rem，所以如果根字体改成18px，这个 margin 会自动变成18px；但如果手动写死p { font-size: 18px; margin-bottom: 16px; }，就破坏了比例 - 安全做法：用
em或rem配合，例如h1 { font-size: 2.8rem; line-height: 1.1; margin-bottom: 0.5em; } - 别漏掉
small或.text-muted——它们默认是父元素font-size的百分比（如 80%），根字体一变，它们也会跟着变，一般不用额外处理
响应式字体：别只靠 media query，优先用 clamp()
想在手机上用 16px、平板 18px、桌面 20px？硬写三段 @media 不仅冗长，而且断点僵硬。现代方案是用 clamp()，Bootstrap 5.3+ 官方组件已开始采用，你也可以直接用。
性能影响极小，兼容性在 2026 年已无顾虑（Chrome 93+/Firefox 91+/Safari 15.4+ 均支持）。
- 示例：让主标题随视口平滑缩放
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }——最小 1.5rem，最大 2.5rem，中间按视口宽度 4vw 动态插值 - 比起媒体查询，
clamp()更适合字体这类连续变量；但注意别用在大量重复元素上（如列表项），避免渲染轻微抖动 - 如果必须兼容旧浏览器（比如还要跑 IE），退回
@media (max-width: 768px) { h1 { font-size: 1.8rem; } }，但得手动维护多套值
line-height 对不对、margin 还协不协调、响应式断点有没有漏掉小屏的 small 标签——这些细节不盯住，页面看起来就是“哪儿怪怪的”。 
