为什么引入Bootstrap CSS后全局字体样式会发生突变？-css教程-PHP中文网

根本原因是Bootstrap的全局重置覆盖了原有样式；其font-size、font-family等通过Computed Styles可确认来源，常见表现为字体变小、家族变更、行高增大；html{font-size:14px}属暴力覆盖，不推荐；应优先在Bootstrap前引入自定义CSS并合理设置选择器权重。

为什么引入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工具箱(专业版)

全功能 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'