根本原因是Bootstrap的全局重置覆盖了原有样式；其font-size、font-family等通过Computed Styles可确认来源，常见表现为字体变小、家族变更、行高增大；html{font-size:14px}属暴力覆盖，不推荐；应优先在Bootstrap前引入自定义CSS并合理设置选择器权重。
根本原因不是字体被“改了”，而是 Bootstrap 的全局重置（reset）和基础排版规则生效了，覆盖了浏览器默认或你原有 CSS 中的 body、h1–h6、p 等元素样式。
检查 Computed Styles 里 font-size 和 font-family 的最终来源
打开开发者工具，选中任意一段文字（比如页面顶部的 h1），切到 Computed 面板，展开 font-size 或 font-family。如果值来自 bootstrap.min.css（尤其带 !important 或出现在 Styles 面板靠后位置），就确认是它在起效。常见表现包括：
- 字体突然变小（Bootstrap v5 默认
font-size: 1rem≈ 16px，但某些项目根字号被设为62.5%后会变成 10px） - 字体家族变成
"Helvetica Neue", Arial, sans-serif（v4）或system-ui, -apple-system, "Segoe UI"（v5） -
line-height变为1.5，段落间距变松
为什么 html { font-size: 14px } 能临时修复但不推荐
这个写法确实能压过 Bootstrap 的 body { font-size: 1rem }，因为 rem 是相对于 html 的，但它属于“暴力覆盖”：
- 只解决字号，不管
font-family、line-height、margin-bottom等其他排版属性 - 破坏 Bootstrap 内部的缩放一致性（比如
.h1是2.5rem，若你把html设成14px，它就不再是设计预期的 35px） - 后续升级 Bootstrap 版本时容易因变量变更（如 v5.3 改用
clamp()）导致行为不可控
真正可控的解法：在引入 Bootstrap 前注入自定义基础样式
Bootstrap 的排版基础变量（如 @font-size-base、@font-family-base）只在 SCSS/Less 源码中生效。如果你用的是编译后的 bootstrap.min.css，就得靠加载顺序和选择器权重来干预：
立即学习“前端免费学习笔记（深入）”；
- 确保你的自定义 CSS 文件（如
base.css）在bootstrap.min.css之前引入，且包含：body { font-family: "Your Font", -apple-system, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.8em; } - 避免用
!important，改用更具体的选择器，例如：html body或body:not(.bootstrap-override)（后者需配合 JS 动态加 class） - 若用 Webpack/Vite，可在入口 JS 中先
import './base.css'，再import 'bootstrap/dist/css/bootstrap.min.css'
容易被忽略的深水区：CSS Custom Properties 和深色模式干扰
Bootstrap v5.3+ 默认启用 CSS 变量（如 --bs-body-font-size），并可能通过 @media (prefers-color-scheme: dark) 注入深色模式样式。如果你的项目也用了同名变量或媒体查询，会出现：
- 夜间模式下字体莫名变细或变小（因
--bs-body-font-size被你自己的变量覆盖） - 局部组件字体正常，但全局
p标签异常（因变量作用域泄漏，比如在 Shadow DOM 或 scoped style 中未透出） - 构建工具（如 PostCSS）自动注入的
prefers-color-scheme规则与 Bootstrap 冲突，导致字体回退到系统默认
此时必须检查 :root 和 @media (prefers-color-scheme: dark) { :root } 中的变量定义顺序，优先级由 CSS 加载顺序决定——变量本身不支持层叠，后定义的直接覆盖前一个。
