bootstrap 5 中 .navbar-brand 默认 font-weight: 500（即 .fw-medium），非 normal 或 bold，故不显眼加粗；直接添加 .fw-bold 类即可生效，失效主因是加载顺序错误、选择器权重不足或与内联样式冲突。
直接加 .fw-bold 类就行，不用写额外 CSS；如果失效，基本是加载顺序或选择器权重问题。
为什么 .navbar-brand 默认不加粗
Bootstrap 5 的 .navbar-brand 默认使用 font-weight: 500（即 .fw-medium），不是 normal 也不是 bold。它本身就有一定粗度，但不够“明显加粗”。你手动加 font-weight: bold 或 700 没用，往往是因为被 Bootstrap 自带的 .fw-medium 或其他规则覆盖了。
常见错误现象：
- 写了
.navbar-brand { font-weight: bold; }，但没生效 - 用了
<strong></strong>包裹文字，结果在小屏幕上字体变小、加粗也不稳定 - 加了
.fw-bold但品牌文字颜色变淡（尤其在.navbar-dark下）
正确做法：优先用 Bootstrap 内置字体粗细类
Bootstrap 5 提供了一套完整的字体粗细工具类，直接作用于 .navbar-brand 元素即可，无需自定义 CSS：
- 加粗：给
<a class="navbar-brand"></a>添加.fw-bold - 更粗：用
.fw-bolder（相对于父元素，通常比.fw-bold更强） - 若需细体对比，可用
.fw-light或.fw-lighter - 避免混用：不要同时写
style="font-weight: 700"和.fw-bold，容易冲突
示例：
<a class="navbar-brand fw-bold" href="#">MySite</a>
加粗后颜色异常？检查 .navbar-dark / .navbar-light 配套设置
.fw-bold 本身只改粗细，不影响颜色。但如果你用了 .navbar-dark，Bootstrap 会默认把 .navbar-brand 设为浅色（如 #fff），而加粗后在暗背景上可能显得“发灰”——这不是加粗的问题，是对比度不足。
解决方法：
- 确认是否漏了
.navbar-dark对应的文本类，比如.text-white或.text-light - 暗色导航栏下，
.navbar-brand默认已含color: #fff，但若你引入了自定义 CSS 覆盖了 color，加粗就更难看清 - 必要时显式补上：
<a class="navbar-brand fw-bold text-white"></a>
什么时候必须写 CSS？仅当需要精确控制或响应式差异
内置类够用，但以下场景仍需手写 CSS：
- 想在桌面端加粗、移动端恢复常规粗细（
.fw-bold d-lg-inline不行，因为.fw-*无响应式变体） - 要和某个特定字体（如
'Inter-Bold'）绑定，且该字体未通过@font-face正确加载 - 遇到旧版 Bootstrap（v4 或更早）未提供
.fw-*类，只能靠font-weight: 700
此时务必确保你的 CSS 文件在 Bootstrap CSS 之后加载，并用足够强的选择器，例如：
.navbar .navbar-brand { font-weight: 700 !important; }
但 !important 是信号灯——说明你大概率没理清加载顺序或层级关系。
真正容易被忽略的点：加粗不是孤立操作，它和字体家族、行高、padding、响应式折叠逻辑都耦合。哪怕只改一个 .fw-bold，也建议在手机/平板/桌面三端都快速过一遍渲染效果。
