如何在Bootstrap中设置全局字体为思源黑体-Bootstrap教程-PHP中文网

需在bootstrap引入后用自定义css覆盖body及.btn、.form-control等关键选择器的font-family，使用"noto sans cjk sc"并保留系统字体回退链，必要时加!important确保生效。

如何在bootstrap中设置全局字体为思源黑体

如何在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 中字体声明最常出现的位置有这几个：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

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") 提前检测