直接改--bs-body-font-family即可统一字体，但须确保CSS在Bootstrap之后加载，且.form-select等组件需额外声明font-family继承；只改body或.h1无法覆盖不继承的组件。
直接改 --bs-body-font-family 就行，不用碰每个组件的 font-family 声明——但得确保它在 Bootstrap CSS 之后加载，且部分表单控件（比如 .form-select）需要手动补一句继承。
为什么不能只改 body 或 .h1 的 font-family
Bootstrap 5.3+ 的排版逻辑已全面转向 CSS 自定义属性驱动。所有依赖字体的组件（.btn、.form-control、.alert、.dropdown-item 等）都通过 var(--bs-body-font-family) 继承，而不是硬编码或靠父级 body 传递。只覆盖 body 会导致：
-
.form-select在 Safari 和旧版 Chrome 中仍用系统默认字体（不继承body） -
.btn的font-weight可能因字体缺失 fallback 而变细（尤其 macOS 上 Inter 缺失时） -
.navbar-brand字体大小正常，但字重/字间距异常（因未同步--bs-font-weight-bold等配套变量）
必须设置的 3 个核心 CSS 变量
仅改 --bs-body-font-family 不够，字体栈变化会连带影响可读性与节奏。建议一并覆盖：
-
--bs-body-font-family：主字体栈，推荐用原生系统字体，例如"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif -
--bs-font-size-base：基础字号，默认1rem（≈16px），若设为18px，所有1rem、1.25rem等单位将等比放大，包括p的margin-bottom和line-height -
--bs-line-height-base：默认1.5，若主字体 x-height 较高（如 Inter），可微调至1.45避免行距发空
写法示例（放在 <style> 或自定义 CSS 文件末尾）：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--bs-font-size-base: 18px;
--bs-line-height-base: 1.45;
}
.form-select 和 .form-range 为什么还要额外声明
这两个组件在部分浏览器中对 CSS 变量的支持滞后：Chrome 115–120、Firefox 110–118 对 form-select 的 font-family 继承存在 bug，会跳过 var(--bs-body-font-family) 直接回退到 sans-serif。
- 必须显式加一句：
.form-select { font-family: var(--bs-body-font-family); } -
.form-range虽无字体问题，但其::-webkit-slider-thumb伪元素不继承font-family，无需处理 - 其他组件如
.btn、.nav-link、.card-title均可完全依赖变量，无需额外样式
用 Sass 变量定制和用 CSS 变量定制的区别在哪
两者都能生效，但适用阶段不同：
- 用 CSS 变量（
--bs-xxx）适合已上线项目、CDN 引入场景，改完即生效，无需构建流程 - 用 Sass 变量（
$font-family-base）需重编译 Bootstrap 源码，适合工程化项目；它会生成更干净的 CSS（无var()函数调用），且能联动生成字体权重映射（如$font-weight-bold影响.fw-bold类） - 注意：Sass 中改
$font-family-base后，必须同时在_variables.scss里确认$font-family-sans-serif也同步更新，否则.text-monospace等类可能出错
真正容易被忽略的是：CSS 变量修改后，务必在 DevTools 的 Elements 面板检查目标元素的 Computed 样式，确认 font-family 最终值是否包含你指定的字体名——有时候字体名带空格但没加引号，或 CDN 字体未加载成功，都会导致 fallback 到系统默认字体，而这个过程静默发生，毫无提示。
