控制字体族的核心css变量是--bs-font-sans-serif（主无衬线字体）、--bs-font-monospace（等宽字体），以及影响排版节奏的--bs-font-size-base和--bs-line-height-base；它们均需在:root中重设，且自定义样式必须置于bootstrap.min.css之后加载才能生效。
直接改 body 或 .h1 的 font-family 无法真正统一字体——Bootstrap 5.3+ 所有文本类组件（包括按钮、表单、下拉项、提示框）都读取 CSS 变量，不是继承父级样式。
哪些变量控制字体族？
核心变量都在 :root 中定义，必须重设它们才能影响全局：
-
--bs-font-sans-serif：主无衬线字体（.btn、.form-control、.dropdown-item都用它） -
--bs-font-monospace：等宽字体（<code>、.pre、.badge等） -
--bs-font-size-base和--bs-line-height-base：基础字号与行高，影响所有相对单位（如1rem、1.5）
注意：--bs-font-sans-serif 默认值是 system-ui, -apple-system, "Segoe UI", sans-serif，不是 "Helvetica Neue" 或 "Roboto"；中文项目若加 "Noto Sans CJK SC"，要放在系统字体之后，否则 macOS 可能跳过 -apple-system 导致英文标点渲染异常。
为什么写了变量却没生效？
常见失效不是变量写错，而是加载时机或作用域问题：
- 自定义
:root块必须在bootstrap.min.css之后 加载，否则被覆盖（检查 DevTools 的 Styles 面板，看你的声明是否被划掉） - 别写成
.my-theme { --bs-font-sans-serif: ...; }——CSS 变量不从普通 class 继承，必须用:root或html -
font-familyfallback 链里带空格的字体名（如Segoe UI）必须加引号，否则浏览器当两个独立字体解析
中文字体 fallback 链怎么写才稳妥？
中文场景下，既要保证 Web 字体加载失败时有兜底，又要避免系统字体被跳过：
- 顺序原则：系统字体 → 中文字体 → 通用 fallback（
sans-serif） - 推荐写法：
--bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - Windows 下若漏掉
"Microsoft YaHei"，可能回退到Times New Roman；Linux 下若没Ubuntu或Cantarell，渲染会发虚
真正容易被忽略的不是“怎么写”，而是“谁在读这个变量”——.btn 读它，.popover-body 读它，但你自己写的 .my-card-title 不会自动继承，除非你显式写 font-family: var(--bs-font-sans-serif);。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
