直接改--bs-body-font-family就能生效，但需确保css在bootstrap后加载、声明在:root中、字体栈完整包含中英文fallback及sans-serif保底，且须同步设置--bs-font-sans-serif并为.form-select等组件额外声明font-family。
直接改 --bs-body-font-family 就能生效，但 90% 的人卡在加载顺序、作用域或字体栈写法上。
为什么改了 --bs-body-font-family 字体还是没变
不是变量没起作用，而是浏览器根本没读到你设的值。常见原因有三个：
- 你的自定义
<style></style>或 CSS 文件写在<link rel="stylesheet" href="bootstrap.min.css">前面——变量被 Bootstrap 覆盖，等于白写 - 写了
body { --bs-body-font-family: ... }或html { ... }——只有:root里的声明才会被 Bootstrap 组件（如.btn、.alert）继承 - 字体栈里只写了
"Noto Sans CJK SC"或"Inter"，没接系统 fallback——iOS Safari 会直接 fallback 到 Times New Roman，而不是无衬线体
--bs-body-font-family 和 --bs-font-sans-serif 有什么区别
Bootstrap 5.3+ 同时用了两个变量控制字体，但用途不同：
-
--bs-body-font-family主要影响body、.lead、.text-muted这类文本类，以及部分组件（如.card-title）的默认继承源 -
--bs-font-sans-serif是更底层的“主无衬线字体”变量，.btn、.form-control、.dropdown-menu等组件的font-family直接引用它，而非--bs-body-font-family - 所以只改一个不够：必须同时设
--bs-body-font-family和--bs-font-sans-serif，否则按钮、输入框字体还是原样
正确写法示例：
:root {
--bs-body-font-family: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bs-font-sans-serif: var(--bs-body-font-family);
}
哪些组件不认 CSS 变量，必须手动加 font-family
即使你把两个变量都设对了，以下组件在 Safari、Firefox 或旧版 Chrome 中仍可能忽略变量：
-
.form-select：下拉框在 Safari 中常回退到系统字体 -
.form-check-input[type="checkbox"] + .form-check-label：label 文字有时不继承 -
.dropdown-item：某些版本中硬编码了字体，尤其在.dropdown-menu内部
稳妥做法是补一句显式声明：
.form-select,
.form-check-label,
.dropdown-item {
font-family: var(--bs-body-font-family) !important;
}
注意：!important 在这里合法且必要——因为这些选择器的原始声明带 !important（Bootstrap 5.3.3+ 的 .form-select 就是），不用它反而覆盖不了。
本地字体（如思源黑体）怎么配才不闪、不 fallback
光改变量只是“告诉 Bootstrap 用什么名字”，不代表浏览器真有这个字体文件。常见失败场景是页面刚打开时闪一下 Times New Roman，然后才变成思源黑体——这是 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）。
- 必须在
加<link rel="preload" as="font" href="/fonts/NotoSansCJKSC-Regular.woff2" type="font/woff2" crossorigin> - 必须写
@font-face，且font-family名称与变量中完全一致（包括引号、空格、大小写） -
@font-face里一定要加font-display: swap，否则加载期间文字空白 - Webpack/Vite 项目中，
url(../fonts/...)容易因构建后路径变化失效，建议用绝对路径或公共静态目录（如/fonts/...）
示例 @font-face：
@font-face {
font-family: "Noto Sans CJK SC";
src: url("/fonts/NotoSansCJKSC-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
最麻烦的点其实是字体栈的顺序和 fallback 的完整性——少一个系统字体，就可能在某台设备上彻底失守；而 :root 作用域和加载顺序这种细节，一旦出错又极难定位。别信“改一行 CSS 就搞定”的说法，实际要动三处：预加载、@font-face、变量声明，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
