Bootstrap 5.3+ 可通过 --bs-navbar-brand-font-family 变量设置本地字体，但需确保变量在 Bootstrap 后加载、同步 @font-face 或 preload 字体文件，且名称严格一致；旧版本须手动 CSS 覆盖 .navbar-brand。
Bootstrap 5 怎么让 navbar-brand 用上本地字体
直接改 --bs-font-sans-serif 变量不行，因为 .navbar-brand 默认不继承它——它用的是独立的 --bs-navbar-brand-font-family 变量（Bootstrap 5.3+ 才有），旧版本压根没这个变量，必须手动覆盖。
- 先确认 Bootstrap 版本：运行
console.log(bootstrap)或查bootstrap.min.css文件头注释；5.3 以下版本跳过变量法，直接上 CSS 覆盖 - 5.3+ 推荐写法：
:root { --bs-navbar-brand-font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }注意：该变量仅作用于.navbar-brand，不影响按钮、表单等其他组件 - 必须同步加载字体文件：光改变量不会自动拉字体。要在
<head>中<link rel="preload">或写@font-face，且font-family名称必须和变量里完全一致（包括引号、空格、大小写） - 验证是否生效：DevTools → Elements → 选中
.navbar-brand元素 → Computed → 检查font-family是否列出你的字体名，且不是 fallback
.navbar-brand 字体不显示自定义字体？常见失效原因
不是代码写错了，大概率是路径、加载时机或选择器权重问题。
-
@font-face的src: url(...)路径错误：Webpack/Vite 环境下url('../fonts/inter.woff2')容易因入口 CSS 文件位置不同而 404；建议用绝对路径url('/fonts/inter.woff2')或检查构建后 dist 目录结构 - 自定义 CSS 加载顺序错：你的
<style>或<link>必须在bootstrap.min.css之后，否则变量会被重置 - 浏览器缓存了旧 CSS：尤其开发时改了
@font-face却没清缓存，字体名对了但文件 404，DevTools Network 标签页会显示font请求失败 - 漏了
font-display: swap：字体加载慢时，.navbar-brand会先空白（FOIT）或闪动（FOUT），加了才稳定；不加的话，用户可能永远看不到你的字体
想只给品牌文字换字体，其他组件保持默认怎么办
别碰全局变量 --bs-font-sans-serif，否则按钮、输入框全跟着变——这是最常踩的坑。
- 精准控制：只覆盖
.navbar-brand的font-family，例如.navbar-brand { font-family: "Inter", sans-serif; }注意：要放在 Bootstrap CSS 后，且选择器足够强（比如加上.navbar前缀） - 响应式需求：如果桌面用 Inter、移动端回退系统字体，不能靠
.d-none .d-lg-inline类组合，因为font-family没响应式工具类；得用媒体查询：@media (max-width: 991.98px) { .navbar-brand { font-family: system-ui, sans-serif; } } - 避免内联样式干扰：如果
.navbar-brand被 JS 动态加了style="font-family: Roboto"，CSS 规则会被覆盖；要么去掉 JS 内联，要么用!important（仅限兜底，不推荐）
用了自定义字体后 navbar-brand 文字模糊或发虚
不是字体问题，是渲染策略没配对。尤其 macOS + Chrome 下明显。
- 检查
@font-face是否声明了font-weight和font-style：如果你的 Inter 字体文件只含 Regular，但 CSS 里写了font-weight: 600，浏览器会强行加粗导致毛边；应确保字体文件与使用场景匹配（如 Inter-SemiBold.woff2 对应font-weight: 600） - macOS 上启用子像素抗锯齿需加：
.navbar-brand { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }不加的话，轻量字体（如 Inter Thin）容易发虚 - 字体加载完成前，回退字体和自定义字体字宽差异大，导致文字位置跳动（CLS）；
font-display: swap能缓解，但最好预设width或用ch单位做最小宽度兜底
