Bootstrap字体大小设置 Bootstrap如何修改h1,p等标签的font-size

最稳妥方式是修改根元素 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，间距就显得太小。

AI工具箱

AI工具箱是一个全方位AI资源聚合平台

下载

常见错误现象：改完字号后，段落之间空隙变窄、标题文字贴顶、移动端文字溢出容器。

• 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; } }，但得手动维护多套值