Bootstrap 5 中 .modal-title 和 .modal-body 字体样式需显式设置，因其不继承 body 或 :root 变量，且受 .modal-header 的 flex 布局约束；仅改全局字体变量无效，须协同设置 font-family、font-size、line-height 并处理响应式与字体加载。
直接改 .modal-title 和 .modal-body 的字体样式最有效，但必须注意它们不继承 body 或 :root 字体变量，且 .modal-title 默认受 .modal-header 的 flex 布局约束。
为什么只改 body 或 :root 字体变量对弹窗无效
Bootstrap 5 的 .modal-title 和 .modal-body 不依赖 --bs-font-sans-serif 变量计算字体，而是硬编码了 font-family（如 .modal-title 默认用 var(--bs-font-sans-serif)，但实际渲染时可能被更高权重规则覆盖）；更关键的是，.modal-header 是 flex 容器，.modal-title 的排版行为（如对齐、行高响应）由其父级控制，不是单纯靠 font-family 决定。
- 你在
:root里改了--bs-font-sans-serif，但.modal-title的 computedfont-family仍显示为"Segoe UI", sans-serif？说明它被.modal-header .modal-title这类更具体的选择器覆盖了 -
.modal-body默认没有显式设font-family，所以会继承.modal的字体——而.modal又没设，最终回退到浏览器默认，不是你设的body字体 - 中文字体加载慢时，
.modal-title可能先以系统字体渲染再闪动替换，需配合@font-face+font-display: swap
精准控制 .modal-title 字体与排版
这是最常被忽略的一环：标题不是纯文本容器，它是嵌套在 flex 布局中的子元素，改字体大小、行高、对齐方式必须协同处理。
- 显式设置
.modal-title的font-family、font-size、line-height，例如：.modal-title { font-family: "Noto Sans CJK SC", -apple-system, sans-serif; font-size: 1.5rem; line-height: 1.3; } - 如果标题含
<small>副标题，必须同步调整.modal-title small，否则副标题字号会按旧font-size计算，显得过小或颜色不对 - 居中显示不能只靠
text-align: center，要改父容器：.modal-header { justify-content: center; }，并重置关闭按钮位置：.btn-close { margin-left: 0; } - 小屏下
.modal-header可能变为 column 布局，此时justify-content方向失效，需加@media (max-width: 768px) { .modal-header { flex-direction: row; } }
统一设置 .modal-body 和正文文本样式
.modal-body 是纯内容区，但它内部的 p、ul、strong 等元素仍走 Bootstrap 全局排版规则，不能只改容器本身。
立即学习“前端免费学习笔记（深入）”；
- 给
.modal-body设font-family仅影响无 class 的直系文本；带.lead、.text-muted的元素仍用各自规则，需单独覆盖 - 推荐写法：
.modal-body, .modal-body p, .modal-body .lead, .modal-body .text-muted { font-family: var(--bs-font-sans-serif); font-size: 1rem; line-height: 1.6; } - 如果用了自定义字体（如 Noto Sans），确保
.modal-body内的链接a也继承该字体：.modal-body a { font-family: inherit; }，否则可能回退到系统默认 - 避免用
* { font-family: ... }全局覆盖，ECharts 图表、CodeMirror 编辑器等第三方组件会字体错乱
容易被忽略的加载与兼容细节
字体设对了，但打开弹窗时还是宋体或 Times New Roman？大概率卡在字体加载链或 fallback 顺序上。
- 中文名必须用正式全称加引号：
"Noto Sans CJK SC"，不能写成"Noto Sans"或Noto Sans CJK SC（缺引号会被解析为多个字体） - fallback 链中英文系统字体必须前置：
"Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif；若把中文字体放最前，macOS 可能跳过 -apple-system 直接渲染，导致英文标点模糊 - 必须在 HTML
<head>中预加载：<link rel="preload" href="/fonts/noto-sans-sc.woff2" as="font" type="font/woff2" crossorigin>，否则弱网下首次弹窗会 FOIT（空白） - Safari 对 CSS 变量支持较弱，
.modal-title若依赖var(--bs-font-sans-serif)，建议降级为显式声明字体栈
