Bootstrap 5中如何用CSS改变全局默认字体系列？-css教程-PHP中文网

直接修改 --bs-font-sans-serif 变量最省事，但必须确保自定义 css 在 bootstrap 之后加载；需配合 @font-face 声明（含 font-display: swap）和，并注意中文字体正式名称与子集化。

bootstrap 5中如何用css改变全局默认字体系列？

直接改 --bs-font-sans-serif 变量最省事，但必须确保你的 CSS 在 Bootstrap 之后加载，否则变量压根不生效。

Bootstrap 5 的 .btn、.form-control、.dropdown-menu 等组件都硬编码了 font-family，不继承 body。你改了 body，按钮和下拉项还是用系统默认字体栈。

常见现象：正文显示思源黑体，但按钮文字仍是 Segoe UI 或 Helvetica Neue
.btn 类的规则权重高、位置靠后，且没声明 inherit
真正“全局”生效，至少要覆盖：.btn、.form-control、.form-select、.dropdown-item、.modal-title、.card-title、.list-group-item
别用 * { font-family: ... }——会污染第三方组件（比如图表库、富文本编辑器）

Bootstrap 5+ 用 CSS 自定义属性控制字体，--bs-font-sans-serif 是主变量。改它比逐个覆盖选择器快，但容易踩加载顺序坑。

VPS Bootstrap

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

下载

写法示例：

:root { --bs-font-sans-serif: "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

某些组件（如 .form-select）在 Safari 或 Firefox 中会忽略该变量，得额外补一句：.form-select { font-family: var(--bs-font-sans-serif); }
中文字体名必须用正式名称："Noto Sans CJK SC"，不是 "Source Han Sans" 或 "思源黑体"；避免用 \5b8b\4f53 这类 Unicode 编码

“设了字体却看起来还是宋体”——大概率是字体文件没加载完，浏览器先用系统字体渲染，等下载完成才重绘。这不是 CSS 写错了，是加载策略问题。

必须加 @font-face 声明，并带 font-display: swap：

@font-face { font-family: "Noto Sans CJK SC"; src: url("/fonts/noto-sans-sc.woff2") format("woff2"); font-display: swap; }

在加预加载：<link rel="preload" href="/fonts/noto-sans-sc.woff2" as="font" type="font/woff2" crossorigin>
中文字体体积大（全量 >1MB），建议子集化或用 CDN 精简版（如 baomitu.com 提供的版本）
不处理这点，哪怕 CSS 全写对了，用户在弱网下看到的仍是“字体闪动 + 布局偏移”

字体栈写全、加载策略配好、CSS 顺序卡死——这三件事缺一不可。漏掉任意一个，都会导致部分组件字体不一致，或首屏文字渲染异常。