直接改 :root 中的 --bs-font-sans-serif 变量最有效，但需确保自定义 css 在 bootstrap.min.css 后加载，并对 .form-select、.dropdown-menu 等不继承变量的组件显式补漏 font-family；仅改 body 无效，因 bootstrap 5 多数组件硬编码 font-family，不依赖继承。
直接改 :root 里的 --bs-font-sans-serif 变量最有效，但必须确保自定义 CSS 在 bootstrap.min.css 之后加载，且要补漏 .form-select、.dropdown-menu 等不严格继承变量的组件。
为什么只改 body 的 font-family 没用
Bootstrap 5 的 .btn、.form-control、.dropdown-item 等组件在 CSS 规则里硬写了 font-family，不依赖 body 继承。你在 body 上设了 "Noto Sans CJK SC"，按钮文字依然显示 "Segoe UI" 或 "Helvetica Neue"，就是这个原因。
浏览器开发者工具里点开任意按钮，看 Computed 面板的 font-family 值，大概率还是 Bootstrap 原始声明值，不是你设在 body 上的那个。
- 改
body只影响纯文本段落（如p、div无 class 的内容） -
* { font-family: ... }全局覆盖会污染第三方组件（比如 ECharts、Quill），不推荐 - 硬改下载下来的
bootstrap.min.css文件：升级时立刻丢失，难维护
正确做法：用 :root 变量 + 补漏关键选择器
Bootstrap 5 把字体控制收口到 CSS 变量，源头改 --bs-font-sans-serif 是最干净的方式，但需两步到位：
- 确保自定义 CSS 在
bootstrap.min.css后引入，例如：<link href="bootstrap.min.css"><link href="custom.css"> - 在
custom.css或<style></style>块中写：:root { --bs-font-sans-serif: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } - 对 Safari/Firefox 中可能忽略变量的组件，显式补一句：
.form-select, .dropdown-menu, .toast-header, .modal-title { font-family: var(--bs-font-sans-serif); }
别漏掉字体加载和回退链细节
光写变量或选择器，不代表字体能立刻渲染出来。中文字体文件大、加载慢，“设了思源黑体却看起来还是宋体”，大概率是字体没就绪。
- 必须用
@font-face声明本地字体，并加font-display: swap，否则弱网下会 FOIT（文本空白）或 CLS（布局跳动） - 在 HTML
中预加载关键字体：<link rel="preload" href="/fonts/noto-sans-sc-v20-latin.woff2" as="font" type="font/woff2" crossorigin> - 字体名必须用正式名称：
"Noto Sans CJK SC"，不是"Source Han Sans"或"思源黑体"；英文部分不能省，否则 iOS/Android 可能 fallback 到Times New Roman
常见失效原因：顺序、路径、作用域
改了但没反应，通常不是代码错，而是环境卡点没对上：
-
custom.css放在bootstrap.min.css前面引入 → 浏览器先读 Bootstrap 的:root，你的被覆盖 - Webpack/Vite 下
@font-face的url(../fonts/...)因构建层级错位失效 → 改用绝对路径或公共目录（如/fonts/noto-sans-sc.woff2） - 用了 Sass 编译但只改了
$font-family-sans-serif变量，却忘了同步更新编译后 CSS 中的:root块 → 最终生成的 CSS 里--bs-font-sans-serif还是原始值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
