直接改--bs-body-font-family变量就能生效，但必须确保css在bootstrap样式后加载且声明在:root里；否则因覆盖顺序错误或作用域不对导致字体不变甚至失效。
直接改 --bs-body-font-family 变量就能生效，但必须确保你的 CSS 在 Bootstrap 样式之后加载，且声明在 :root 里——否则字体不会变，甚至完全失效。
为什么改了 --bs-body-font-family 字体还是没变
Bootstrap 5.3+ 把主体字体交给 CSS 自定义属性控制，但这个变量只在 :root 中声明一次，后续修改有硬性前提：
- 你的自定义 CSS 文件（或
<style></style>块）必须放在 Bootstrap 的<link rel="stylesheet">之后，否则被覆盖 - 必须用
:root { --bs-body-font-family: ... }，不能写body或html—— 因为 Bootstrap 大量组件（如.btn、.alert）直接继承:root的该变量，而非body的声明 - 如果用了 Sass 编译（比如
@import "bootstrap/scss/bootstrap"），改 CSS 变量是“运行时补丁”，不如提前改$font-family-sans-serif并重新编译来得可靠
--bs-body-font-family 的值必须是完整字体栈
只写一个字体名（比如 "Inter"）会导致 iOS、旧 Android 或字体未安装时回退到系统默认无衬线体，甚至 Times New Roman。正确写法要包含中英文 fallback：
- 中文字体放前面：
"Noto Sans CJK SC"或"Microsoft YaHei"，注意引号仅用于含空格或特殊字符的字体名 - 接着接系统字体栈：
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial - 末尾必须是
sans-serif（不加引号），这是最终保底，不能省略 - 别加
!important—— CSS 变量本身不支持!important，写了会触发解析错误
示例：
:root {
--bs-body-font-family: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
哪些组件其实不认 --bs-body-font-family
这个变量主要影响 body 和基础文本类（如 .lead、.text-muted），但部分组件仍硬编码字体声明：
-
.form-select在 Chrome/Firefox 中常忽略该变量，强制使用系统下拉控件字体 -
input、textarea、button默认不继承body字体，需额外加font-family: inherit -
pre和code使用独立字体栈（SFMono-Regular等），不受--bs-body-font-family影响 - 某些第三方插件或 Shadow DOM 内容可能完全隔离，需单独处理
验证是否生效：打开 DevTools → Elements → 选任意文本元素 → Computed → 查看 font-family 最终计算值，不是看 Styles 面板里的声明。
字体加载失败时的视觉断层怎么缓解
即使变量设对了，浏览器也可能因 Web Font 未加载完成而短暂显示系统默认字体，造成闪动或错位：
- 用
@font-face预加载关键字体，并设置font-display: swap，保证文本及时可见 - 避免在
:root中引用尚未声明的自定义字体名（如"Inter"却没配@font-face），否则整条字体栈可能跳过它往下找 - 思源黑体这类中文字体体积大，建议按需加载（如只在中文页面引入），否则拖慢首屏
最易被忽略的一点：改完后务必检查 button 和 .form-control 的实际渲染效果——它们往往比 p 或 h1 更早暴露字体覆盖漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
