根本原因是Bootstrap全局重置覆盖原有样式；表现为字体变小、字族变更、行高增大等，因font-size继承链断裂或根字号被设为62.5%致1rem≈10px，且font-family切换引发系统渲染差异。
引入 Bootstrap CSS 后字体“偏移”，不是字体位置真的移动了，而是全局排版基础值被重置覆盖，导致字号、行高、字族、段落间距等集体变化——视觉上就像文字突然“缩进”“变小”“发虚”或“松散”了。
为什么 computed font-size 突然变成 1rem（≈16px）却看起来更小？
常见于项目根元素已设 html { font-size: 62.5% }（为 rem 计算方便），此时 1rem = 10px；而 Bootstrap v5 的 body { font-size: 1rem } 会继承这个 10px，远小于预期的 16px。更糟的是，若你原有样式用的是 px 或 em，而 Bootstrap 用 rem，继承链一断，所有相对计算就错位。
- 打开 DevTools → Computed → 查
font-size的最终来源，确认是否来自bootstrap.min.css的body规则 - 检查
html元素的font-size是否被你或其他库提前修改过（比如 Normalize、postcss-pxtorem） - Bootstrap v5.3+ 开始用
clamp()动态字号，若你没配--bs-root-font-sizeCSS 变量，它可能 fallback 到浏览器默认值，行为更难预测
为什么 font-family 变成 system-ui, -apple-system, sans-serif 就显得“不清晰”？
这不是字体“糊”，而是系统字体栈切换后，渲染策略和字重表现不同：macOS Safari 对 -apple-system 的子像素抗锯齿更激进，深色背景下易显灰；Windows Chrome 默认用 Segoe UI，但若未安装或 fallback 到 Arial，字宽和 x-height 就和你原设计不一致，造成视觉“偏移感”。
-
font-smoothing和text-rendering属性不会被 Bootstrap 设置，但它的字体栈会触发系统底层渲染路径切换 - 别在自定义 CSS 里写
-webkit-font-smoothing: antialiased——Chrome 110+ 已无视该声明，Safari 中反而加剧发虚 - 若必须保真，应在
@font-face中显式加载品牌字体，并用font-display: swap+ascent-override锁定度量，避免替换抖动
为什么加 html { font-size: 14px } 能临时压住，但上线前必须删掉？
它确实能覆盖 Bootstrap 的 1rem，让字号回到 14px，但这是破坏性修复：Bootstrap 所有 .h1（2.5rem）、.lead（1.25rem）、gap（1rem）都会同比例缩水，栅格列宽、按钮高度、间距节奏全乱；且一旦升级到 v5.4，其内部变量改用 calc(1rem * var(--bs-ratio))，你的硬编码就彻底失效。
- 真正可控的做法：在
bootstrap.min.css前引入你的base.css，只重置body和标题级元素 - 写法示例：
body { font-family: "Inter", -apple-system, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; } - 避免用
!important，改用html body或body:not([data-bs-theme])提升权重，保留 Bootstrap 主题切换能力
最常被忽略的一点：字体偏移很少是单一属性问题，而是 font-size、line-height、margin-bottom、letter-spacing 四者联动失效。只调字号，不碰行高和段距，文字照样“上浮”或“下沉”。务必在 Computed 面板里连着看这四个值的最终来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
