Bootstrap 5 默认不加载 Google Fonts且无内置本地字体配置入口，需手动通过@font-face声明、preload预加载及Sass变量同步覆盖，并设font-display:swap避免FOIT和CLS。
Bootstrap 5 默认不加载 Google Fonts，但也没内置本地字体族配置入口
Bootstrap 5 彻底移除了对 https://fonts.googleapis.com 的默认依赖，所有字体加载交由开发者自行控制。这意味着：$font-family-sans-serif 等 Sass 变量虽然可覆盖，但仅影响 CSS 编译结果，不自动引入字体文件本身——你得自己提供 @font-face 或预加载的本地字体。
在 _custom.scss 中重定义 $font-family-sans-serif 必须配合实际字体加载
直接改变量只是“告诉 Bootstrap 用什么名字”，不代表浏览器能渲染出来。常见错误是只写：
$font-family-sans-serif: 'MyLocalFont', sans-serif;
然后发现文字还是显示系统默认字体。必须同步做两件事：
- 在 HTML
中通过或@import加载本地字体文件（如fonts/MyLocalFont.woff2） - 手动写
@font-face块，确保font-family: 'MyLocalFont'名称与变量中一致（注意引号、大小写、空格） - 确认字体文件路径在构建后能被 CSS 正确访问（Webpack/Vite 环境下，
url(../fonts/...)容易因目录层级错位失效）
使用 font-display: swap 避免 FOIT 和布局偏移
本地字体加载慢时，用户会看到空白文本（FOIT）或回退字体突然跳变（layout shift）。Bootstrap 本身不控制这个，需你在 @font-face 中显式声明：
@font-face {
font-family: 'MyLocalFont';
src: url('../fonts/MyLocalFont.woff2') format('woff2');
font-display: swap; /* 关键：立即用回退字体，加载完再替换 */
}
不加 font-display 或设为 auto（默认值）在 Chrome/Firefox 下极易触发 CLS（累计布局偏移），影响 Core Web Vitals。
编译时通过 npm run build 检查字体是否真被引用进最终 CSS
有时 Sass 变量改了，但字体名拼错、@font-face 没 import 进主样式入口，或构建工具把 url() 路径解析成 404，最终 CSS 里根本没生成对应规则。快速验证方法：
- 打开浏览器 DevTools → Elements → 找一个用了
.h1或.btn的元素 → Computed → Font Family，看是否列出你的字体名 - 搜索最终生成的
app.css文件，Ctrl+F 查@font-face和你的字体名，确认存在且src路径可访问（点击路径应下载字体文件） - 禁用网络后刷新页面，如果文字没变成方块或全回退到
sans-serif，说明字体未真正内联或预加载失败
字体加载链路长（HTML preload → CSS @font-face → Sass 变量 → 实际 class 应用），任一环断开都会静默失败，没有报错提示。最稳妥的做法是：先用 font-display: optional + 本地 fallback 测试渲染逻辑，再逐步放开加载策略。
