直接改body和关键组件选择器的font-family最快生效，但需覆盖.btn、.form-control等所有硬编码字体的组件，回退链须含"noto sans cjk sc", -apple-system, blinkmacsystemfont, "segoe ui", roboto, "helvetica neue", arial, sans-serif，并确保custom.css在bootstrap之后引入且@font-face配置正确。
直接改 body 和关键组件选择器的 font-family 最快生效，但必须覆盖全、回退链写对、加载顺序卡死。
为什么只改 body 字体没用
Bootstrap 5 的 .btn、.form-control、.dropdown-menu 等组件都硬编码了 font-family，不继承 body。你改了 body，按钮和下拉项还是用系统默认字体栈。
- 常见错误现象：页面正文显示思源黑体，但按钮文字仍是
Segoe UI或Helvetica Neue - 根本原因：Bootstrap CSS 文件里这些类的规则权重高、位置靠后，且未声明
inherit - 必须手动覆盖的选择器至少包括：
.btn、.form-control、.form-select、.dropdown-item、.modal-title、.toast-header、.list-group-item - 不要用
* { font-family: ... }—— 会污染第三方组件（比如图表库、富文本编辑器）的字体控制
字体栈怎么写才不翻车
只写一个中文字体名（比如 "Noto Sans CJK SC"）等于裸奔。iOS、旧 Android、字体未安装时会 fallback 到 Times New Roman，不是你想要的“无衬线体”。
- 正确写法是完整回退链：
"Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif - 英文部分不能省：
-apple-system和BlinkMacSystemFont是 macOS/iOS 的高性能系统字体；Roboto覆盖 Android；Arial是 Windows 保底 - 中文名要用正式字体名：
"Noto Sans CJK SC"，不是"Source Han Sans"或"思源黑体"—— 后两者在部分系统上识别率低 - 避免使用
\5b8b\4f53这类 Unicode 编码写法，现代浏览器兼容性差，且无法被构建工具解析
自定义 CSS 必须放在 Bootstrap 之后
如果你的 custom.css 在 bootstrap.min.css 前引入，所有 font-family 声明都会被覆盖，白写。
- HTML 中顺序必须是：
<link rel="stylesheet" href="bootstrap.min.css">→<link rel="stylesheet" href="custom.css"> - 如果用
<style></style>块，也要确保它在 Bootstrap 的<link>之后 - Sass 项目例外：若你用
@import "bootstrap/scss/bootstrap"，就别碰运行时 CSS —— 改$font-family-sans-serif并重新编译更干净 - 验证是否生效：DevTools → Elements → 任一按钮元素 → Computed →
font-family，看是否列出你的字体名（注意引号和空格）
本地字体要配 @font-face + font-display: swap
改了 font-family 只是“告诉浏览器用什么名字”，不代表字体文件已加载。没配 @font-face，浏览器永远找不到 "MyLocalFont"。
-
@font-face块必须放在自定义 CSS 文件最顶部，且在所有选择器之前 - 必须提供多格式：
woff2（主）、woff（降级）、ttf（兜底），否则 IE11 或某些 WebView 会显示方块 -
src路径是相对于 CSS 文件位置的，不是 HTML 页面 ——url('../fonts/my.woff2')比url('fonts/my.woff2')更安全 - 务必加
font-display: swap，否则字体加载慢时会出现 FOIT（空白文本）或 CLS（布局跳动）
真正麻烦的不是写几行 CSS，而是字体名大小写、路径层级、回退顺序、加载时机这四点全得对上。少一个，用户看到的就是 Times New Roman 或方块字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
