直接修改 --bs-body-font-family 变量即可生效，但需确保 css 在 bootstrap 样式后加载且用 :root 重定义；sass 项目应改 $font-family-sans-serif 并重新编译。
直接改 --bs-body-font-family 自定义变量就能生效，但必须确保你的 CSS 在 Bootstrap 的样式之后加载，否则会被覆盖。
为什么改了变量字体还是没变
Bootstrap 5.3+ 使用 CSS 自定义属性（CSS Custom Properties）管理字体，主体字体由 --bs-body-font-family 控制。但这个变量只在 :root 中声明一次，后续修改必须满足两个条件：
- 你的 CSS 文件或
<style></style>标签要放在 Bootstrap 的<link>或<style></style>之后 - 必须用
:root重定义，不能只写body或其他选择器（因为 Bootstrap 的组件样式大多继承自:root的该变量） - 如果用了 Sass 编译，就别动 CSS 变量，改
$font-family-sans-serif并重新编译更稳妥
最简安全的 CSS 覆盖写法
在你自己的样式文件末尾（或 <style></style> 块底部）加：
:root {
--bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
注意几点：
- 值必须是完整字体栈（font stack），不能只写
"Inter"—— 否则 iOS、旧 Android 会回退到系统默认无衬线体甚至 Times New Roman - 引号仅用于含空格或特殊字符的字体名，如
"Source Sans Pro"；sans-serif末尾不加引号 - 不要加
!important—— CSS 变量本身不支持!important，写了反而报错
用 Sass 项目时别碰 CSS 变量
如果你是通过 @import "bootstrap/scss/bootstrap" 引入的，应该提前覆盖 Sass 变量：
$font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; @import "bootstrap/scss/bootstrap";
这样生成的 CSS 里 --bs-body-font-family 就已经是你的字体，且所有依赖它的组件（.btn、.form-control、.alert 等）自动同步更新。比运行时靠 CSS 变量覆盖更可靠，也避免因加载顺序出问题。
字体加载失败时的兜底行为
即使你设了 --bs-body-font-family，浏览器仍可能因字体未加载完成而短暂显示系统默认字体。建议：
- 用
@font-face预加载关键字体，并设置font-display: swap - 检查 DevTools → Elements → Computed →
font-family，确认最终计算值是否为你期望的字体栈 - 某些组件（如
.form-select）在部分浏览器中会忽略 CSS 变量，强制指定font-family更保险：.form-select { font-family: var(--bs-body-font-family); }
真正麻烦的不是改变量，而是字体链里某一级缺失时的回退表现——比如 Windows 上没有 Inter，又没配好 fallback，就可能突然变成 Courier New。多测几个系统和浏览器，别只盯着 Chrome 开发者工具看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
