需在Bootstrap引入后用自定义CSS覆盖body及.btn、.form-control等关键选择器的font-family，使用"Noto Sans CJK SC"并保留系统字体回退链，必要时加!important确保生效。
如何在Bootstrap中覆盖默认字体栈
Bootstrap 5 默认使用系统字体栈（system-ui, Segoe UI 等），不直接支持思源黑体（Noto Sans CJK SC）这类中文字体。想全局生效，必须在 CSS 层级上覆盖 font-family，且顺序和回退机制要合理。
- 不能只改
:root或body—— Bootstrap 的组件（如.btn、.alert）自带字体声明，优先级更高，需更具体的 CSS 选择器或!important（不推荐） - 思源黑体的正式字体名是
Noto Sans CJK SC（简体中文版），不是"Source Han Sans"或"思源黑体"，后者在部分系统上可能不识别 - 必须保留英文/数字回退字体，否则英文字体可能发虚或 fallback 到 Times New Roman
推荐写法：
body {
font-family: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
为什么直接在 bootstrap.css 里改无效
你下载的官方 bootstrap.min.css 是压缩后的产物，且其 font-family 声明分散在多个地方（body、.btn、.form-control 等）。硬改源文件不仅难维护，而且一旦升级 Bootstrap 就会丢失修改。
- Bootstrap 5.3+ 使用 CSS 自定义属性（
--bs-body-font-family），但仅用于body和部分基础类，.card、.dropdown-menu等仍用硬编码字体 - 直接覆盖
body只影响文本流内容，不影响组件内部字体（比如.btn里的文字仍走自己的font-family） - 正确做法：在引入 Bootstrap 后，用自定义 CSS 文件覆盖所有关键选择器
需要覆盖哪些选择器才能真正“全局”生效
所谓“全局”，是指所有文字内容（包括按钮、表单、下拉菜单、提示框等）都用思源黑体。Bootstrap 中字体声明最常出现的位置有这几个：
-
body（基础文本） -
.btn、.btn-group（按钮类） -
.form-control、.form-select（表单控件） -
.dropdown-menu、.toast-header、.modal-title（弹层与提示） -
.card-title、.list-group-item（结构化内容）
最小必要覆盖示例（放在 Bootstrap 引入之后）：
body,
.btn, .form-control, .form-select,
.dropdown-item, .dropdown-header,
.toast-header, .modal-title,
.card-title, .list-group-item {
font-family: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
注意：!important 在这里不是偷懒，而是对抗 Bootstrap 多处内联或高优先级声明的必要手段。
字体加载失败时的降级风险与兼容性处理
思源黑体不是系统预装字体，用户本地没有时，浏览器会跳过并尝试下一个字体。如果没配好回退链，可能最终落到 Times New Roman 或 serif，中文显示成方块或乱码。
- 确保 Web 字体已正确加载：建议用
@font-face自托管或通过 Google Fonts（注意 CDN 是否支持Noto Sans CJK SC） - 不要省略
-apple-system和BlinkMacSystemFont—— 它们在 macOS/iOS 上渲染更清晰，且比思源黑体更轻量 - Windows 用户若未安装思源黑体，
"Segoe UI"是最安全的后备；Linux 用户则依赖Roboto或sans-serif - 避免用
font-display: swap过度激进——中文字体体积大，闪动明显，可考虑font-display: optional或配合local("Noto Sans CJK SC")提前检测
真正麻烦的点不在怎么写，而在于：你得确认字体文件路径对、权重匹配（400/500/700）、且所有用到粗体的地方（.fw-bold）也对应了正确的 font-weight 映射。漏一个，那一块就突然变宋体。
