如何在Bootstrap 5中利用CSS覆盖默认的字体样式？-css教程-PHP中文网

直接修改 :root 中的 --bs-font-sans-serif 变量可全局生效，但需确保自定义 css 在 bootstrap.min.css 后加载，并补充 .form-select、.dropdown-menu 等组件的 font-family 声明，同时配合 @font-face 和 preload 保证字体及时渲染。

如何在bootstrap 5中利用css覆盖默认的字体样式？

直接改 :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 是源头解法，但得做两件事：

VPS Bootstrap

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

下载

在 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; }

对部分浏览器中可能忽略变量的组件，显式补一句：

.form-select, .dropdown-menu, .toast-header { font-family: var(--bs-font-sans-serif); }

`@font-face` 和预加载不能少

光写变量或选择器，不代表字体能立刻渲染出来。中文字体文件大、加载慢，“设了思源黑体却看起来还是宋体”，大概率是字体没就绪。

必须用 @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>

字体文件路径要和构建后实际访问路径一致；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，现代构建工具无法解析，浏览器兼容性也差