最简安全的覆盖方式是在:root中重定义--bs-body-font-family，且css文件必须置于bootstrap之后；字体栈需完整包含中英文fallback，如"noto sans cjk sc", -apple-system, "segoe ui", sans-serif，并为.form-select等组件额外声明font-family以确保兼容。
直接覆盖 --bs-body-font-family 变量最简单，但加载顺序和浏览器兼容性容易翻车
Bootstrap 5+ 用 CSS 自定义属性控制字体，改 --bs-body-font-family 是最快路径。但必须确保你的 CSS 在 Bootstrap 的 <link> 或 <style></style> 之后加载，否则变量根本不会生效。常见错误是把自定义样式写在 开头，结果被 Bootstrap 覆盖掉。
字体栈必须写完整，不能只写 "Inter" 或 "Noto Sans CJK SC"。比如中文字体要带英文回退："Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。漏掉系统字体会导致 iOS 或旧 Android 直接 fallback 到 Times New Roman。
某些组件（如 .form-select）在 Safari 或 Firefox 中会忽略该变量，稳妥做法是额外加一句：.form-select { font-family: var(--bs-body-font-family); }
用 Sass 重编译 $font-family-sans-serif 更可靠，但需要构建流程支持
如果你项目本身用 Sass 编译 Bootstrap（比如通过 @import "bootstrap/scss/functions";），那就别碰 CSS 变量——直接改 $font-family-sans-serif 变量再重新编译。这样生成的 CSS 里所有依赖它的组件（.btn、.alert、.card-title 等）都会自动继承新字体，不用手动补漏。
这种方式规避了加载顺序问题，也避免运行时因字体未就绪导致的 FOIT（文本不可见闪动）。但前提是：你得有 Sass 构建环境；升级 Bootstrap 版本时需同步检查变量名是否变更（比如 v5.3 后部分变量前缀微调）；不能用于 CDN 直引场景。
中文字体如思源黑体必须处理加载性能，否则页面首屏文字发虚或跳动
“设了字体却看起来还是宋体”——大概率是字体文件没加载完，浏览器先用系统字体渲染，等字体下载完成才重绘。这不是 CSS 写错了，是加载策略问题。
解决办法分三步：
- 用
@font-face声明字体，并加font-display: swap，保证文本立即可见 - 在 HTML
加预加载：<link rel="preload" href="/fonts/noto-sans-sc-v20-latin.woff2" as="font" type="font/woff2" crossorigin> - 中文字体文件体积大（全量 Noto Sans CJK SC >1MB），建议按需子集化，或用 CDN 提供的精简版（如 baomitu.com 的版本）
不处理这点，哪怕 CSS 全写对了，用户在弱网下看到的仍是“字体闪动 + 布局偏移”。
!important 强制覆盖适用于快速验证，但长期维护成本高
有些团队图省事，在 body 和一堆组件选择器后加 !important，比如：body, .btn, .form-control { font-family: "Microsoft YaHei", sans-serif !important; }。这确实能压住所有默认样式，但代价明显：
后续想局部调整某个按钮字体？得写更长的选择器+更高权重，或者又加 !important，很快变成样式战争。而且 Bootstrap 6（若发布）可能调整内部结构，这类硬编码选择器容易失效。
真正需要全局统一的场景，优先走变量或 Sass；只有临时调试、或嵌入第三方 CMS 无法改构建流程时，才用 !important 救急。
字体定制最易被忽略的不是语法，而是字体加载时机与回退链完整性。CSS 写对只是第一步，没配 font-display 和预加载，等于只画了半张弓。
