bootstrap 5 字体由 css 变量控制，核心包括 --bs-font-sans-serif、--bs-font-monospace、--bs-font-size-base、--bs-line-height-base 和 --bs-font-weight-* 等，全部定义在 :root 中，组件样式均基于这些变量计算。
Bootstrap 5 的字体样式由哪些 CSS 变量控制
Bootstrap 5 默认用 CSS 自定义属性（即 CSS 变量）管理排版，核心变量都在 :root 里定义。改字体不是去覆盖 .h1 或 body 的 font-family，而是重设这些变量——否则容易漏掉按钮、表单、下拉项等组件的字体继承。
关键变量有：--bs-font-sans-serif（主字体）、--bs-font-monospace（等宽字体）、--bs-font-size-base（基础字号）、--bs-line-height-base（行高）、--bs-font-weight-*（如 --bs-font-weight-bold）。
- 所有文本类组件（
.h1～.h6、.lead、.text-muted）都基于这些变量计算最终样式 -
--bs-font-sans-serif默认值是system-ui, -apple-system, "Segoe UI", sans-serif，不是"Helvetica Neue"或"Roboto" - 修改变量后，无需重新编译 Sass，纯 CSS 就生效（但需确保在 Bootstrap 样式之后加载）
如何安全覆盖 Bootstrap 字体变量
直接在 :root 里重写变量最稳妥，但要注意加载时机和作用域。很多人把新变量写在 <style></style> 标签里却放在 Bootstrap CSS 之前，结果被覆盖。
正确做法：
- 确保自定义 CSS 在
bootstrap.min.css之后引入，或用<link rel="stylesheet">按顺序加载 - 在
:root中重设变量，例如：:root { --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --bs-font-size-base: 1rem; --bs-line-height-base: 1.5; } - 不要只改
body的font-family：Bootstrap 的.btn、.form-control等不继承body字体，它们直读变量
字体 fallback 链容易出错的三个地方
替换 --bs-font-sans-serif 时，fallback 链设计不当会导致 Windows 和 Linux 下渲染异常，或字体回退到 Times New Roman。
- 避免在字体名中加空格却不加引号，比如
Segoe UI必须写成"Segoe UI"，否则浏览器当两个独立字体名解析 - 不要省略系统字体 fallback：Web 字体加载失败时，
-apple-system、BlinkMacSystemFont、"Segoe UI"、Ubuntu、"Cantarell"、"Fira Sans"、"Droid Sans"、sans-serif这一整串仍有必要保留 - 中文场景下，如果加了
"Noto Sans CJK SC"或"PingFang SC"，要确保它出现在英文系统字体之后，否则 macOS 可能跳过-apple-system直接用中文字体，导致英文标点渲染变丑
为什么改了变量，某些组件字体还是没变
常见于自定义主题、第三方插件或内联样式干扰。比如 data-bs-toggle="tooltip" 的 tooltip 内容、Toast 的 body、Modal 标题，它们可能用了 !important 或硬编码字体。
- 检查是否被
style=""属性覆盖：React/Vue 组件有时会动态注入内联样式，优先级高于 CSS 变量 - 某些插件（如
bootstrap-icons的 SVG 图标文本）不走排版变量，需单独处理.bi::before的font-family - 如果用了 Sass 版本且自己编译，确认没在
_variables.scss里手动改过$font-family-sans-serif—— 此时 CSS 变量已失效，得同步更新 Sass 变量
变量统一管理确实省事，但前提是所有路径都走同一套继承链。一旦有组件绕过变量、或你忘了它根本没读变量，就只能逐个揪出来补样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
