直接改body的font-family不行，因为bootstrap 5的.btn、.form-control等组件硬编码字体声明，不继承body；需覆盖--bs-font-sans-serif变量或显式设置关键组件font-family，并确保css在bootstrap之后加载。
直接改 body 的 font-family 为什么不行
因为 Bootstrap 5 的组件（比如 .btn、.form-control、.dropdown-item）内部都硬编码了字体声明，不继承 body。只改 body 后，按钮和下拉菜单里的文字还是系统字体。
常见错误现象：页面正文看着像思源黑体，点开下拉框或输入框，文字突然变成 Segoe UI 或 Helvetica Neue。
- Bootstrap 的字体逻辑依赖 CSS 变量（如
--bs-font-sans-serif），不是靠层级继承 -
.form-select在 Safari 中甚至会忽略变量，必须显式加font-family: var(--bs-font-sans-serif) - 改
:root变量是最小侵入方式，但必须确保你的 CSS 在bootstrap.min.css之后加载
用 :root 覆盖 --bs-font-sans-serif 的安全写法
这是 Bootstrap 5.3+ 官方推荐路径，但 fallback 链写错会导致英文发虚或回退到 Times New Roman。
正确写法示例（放在 Bootstrap 引入之后）：
:root {
--bs-font-sans-serif: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
- 中文字体名必须是
"Noto Sans CJK SC"，不是"Source Han Sans"或"思源黑体"，后者在 Windows/Linux 上大概率失效 - 英文 fallback 必须保留
-apple-system、BlinkMacSystemFont、"Segoe UI"等，否则旧版 Chrome 或 Linux 桌面会 fallback 到 serif 字体 - 不要漏掉
sans-serif末尾兜底，这是浏览器最后的保底机制
@font-face 加载思源黑体时必做的三件事
光写对 CSS 不够。用户首次访问时如果字体没加载完，浏览器会先用系统字体渲染，等字体重绘——造成文字跳动、布局偏移（FOIT）。
- 在
@font-face声明里加font-display: swap，保证文本立即可见 - 在
里预加载关键字体：<link rel="preload" href="/fonts/noto-sans-sc-v20-latin.woff2" as="font" type="font/woff2" crossorigin> - 中文字体文件太大（全量 >1MB），务必子集化或用 CDN 精简版（如 baomitu.com 提供的 Noto Sans CJK SC subset）
哪些组件要额外加 font-family 声明
即使你改了 --bs-font-sans-serif，部分组件仍可能不生效，尤其在 Firefox 和 Safari 下。
-
.form-select：Firefox 会忽略变量，需单独加.form-select { font-family: var(--bs-font-sans-serif); } -
.dropdown-menu和.toast-header：某些版本 Bootstrap 里它们用的是--bs-body-font-family，而非--bs-font-sans-serif -
.card-title、.list-group-item：虽然理论上继承，但在自定义主题或嵌套较深时容易被覆盖，建议统一加进主选择器列表
真正“全局”生效的最小选择器集合至少包括：body, .btn, .form-control, .form-select, .dropdown-item, .modal-title, .card-title, .list-group-item —— 这些漏掉任何一个，都可能在某个角落露出系统默认字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
