直接修改 :root 中的 --bs-font-sans-serif 变量可全局生效，但需确保自定义 CSS 在 bootstrap.min.css 后加载，并补充 .form-select、.dropdown-menu 等组件的 font-family 声明，同时配合 @font-face 和 preload 保证字体及时渲染。
直接改 :root 里的 --bs-font-sans-serif 变量就能全局生效，但必须确保你的 CSS 在 bootstrap.min.css 之后加载，且字体栈写全、组件补漏——否则按钮、下拉框、表单控件依然用系统默认字体。
为什么只改 body 的 font-family 没用
Bootstrap 5 的 .btn、.form-control、.dropdown-item 等组件都硬编码了字体声明，不继承 body。你看到正文变了，但按钮还是 "Segoe UI" 或 "Helvetica Neue"，就是这个原因。
- 浏览器开发者工具里点开任意按钮，看
Computed面板的font-family值，大概率显示的是 Bootstrap 原始值，不是你设在body上的那个 - 想靠
* { font-family: ... }全局覆盖？会污染第三方组件（比如图表库、富文本编辑器），不推荐 - 改
body只影响纯文本段落，对组件类无效——这不是 bug，是 Bootstrap 的设计意图
正确覆盖方式：用 :root 变量 + 补漏关键组件
Bootstrap 5 把字体控制收口到 CSS 变量，改 --bs-font-sans-serif 是源头解法，但得做两件事：
- 在
bootstrap.min.css后引入自定义样式，例如：<link href="bootstrap.min.css"><link href="custom.css">
- 在
custom.css或<style>块中写：:root { --bs-font-sans-serif: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } - 对部分浏览器中可能忽略变量的组件，显式补一句：
.form-select, .dropdown-menu, .toast-header { font-family: var(--bs-font-sans-serif); }
@font-face 和预加载不能少
光写变量或选择器，不代表字体能立刻渲染出来。中文字体文件大、加载慢，“设了思源黑体却看起来还是宋体”，大概率是字体没就绪。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@font-face声明本地字体，并加font-display: swap，否则弱网下会 FOIT（文本空白）或 CLS（布局跳动） - 在 HTML
<head>中预加载关键字体：<link rel="preload" href="/fonts/noto-sans-sc-v20-latin.woff2" as="font" type="font/woff2" crossorigin>
- 字体文件路径要和构建后实际访问路径一致；Webpack/Vite 下
url(../fonts/...)容易因层级错位失效，建议用绝对路径或公共目录
容易被忽略的兼容性细节
字体栈写错一个 fallback，Windows 或旧 Android 就可能回退到 Times New Roman，而不是你想要的无衬线体。
- 中文字体名必须用正式名称：
"Noto Sans CJK SC"，不是"Source Han Sans"或"思源黑体"——后者在部分系统识别率低 - 英文 fallback 不可省：
-apple-system（macOS/iOS）、BlinkMacSystemFont（新版 Safari）、Roboto（Android）、Arial（Windows）缺一不可 - 别用 Unicode 编码写法如
\5b8b\4f53，现代构建工具无法解析，浏览器兼容性也差
最常翻车的不是变量写错，而是字体文件没加载完就渲染、或 fallback 链断档导致系统兜底失败。验证时别只看 DevTools 里变量是否生效，要点开任意按钮元素，看 Computed → font-family 最终计算值是不是你预期的字体名。
