直接加 .fw-bold 类即可实现品牌文字加粗，无需手写 font-weight: bold；失效主因是加载顺序错误、选择器权重不足或字体不支持 700 字重，加粗后发灰则需配合 .text-white 提升对比度。
品牌文字加粗用 .fw-bold，别写 font-weight: bold
直接给 <span class="navbar-brand">MySite</span> 加 .fw-bold 就行，Bootstrap 5 内置类已覆盖所有常见场景。手写 CSS 容易被 .navbar-brand 默认的 font-weight: 500 覆盖，尤其当你的自定义样式加载早于 Bootstrap CSS 时。
常见失效原因：
-
.fw-bold加了但 DevTools 显示 computedfont-weight是500→ 检查是否漏写了 class，或被内联style="font-weight: 600"直接赢了选择器权重 - 加粗后文字发灰（尤其在
.navbar-dark下）→ 不是加粗问题，是颜色对比度不足；补一句.navbar-brand.fw-bold { color: #fff; }或直接加.text-white - 用了 Inter、Roboto 等可变字体但没加载 weight=700 的字重 → 浏览器只能模拟加粗，结果模糊发虚；确认
@font-face是否引入了 bold 版本
调整字体间距（letter-spacing）必须写 CSS，Bootstrap 没提供工具类
letter-spacing 不像粗细或大小有内置类，得自己写规则。但要注意作用对象和加载时机：
- 只对
.navbar-brand生效：写.navbar-brand { letter-spacing: 0.05em; }，别套在父容器上 - 避免影响下拉菜单或折叠态：
.navbar-brand在移动端常被包裹进.navbar-collapse，所以不要用太激进的值（如0.2em），否则小屏下文字撑开导致换行 - 想响应式控制？必须媒体查询：
@media (min-width: 992px) { .navbar-brand { letter-spacing: 0.1em; } }——ls-*这类工具类并不存在 - 慎用负值：比如
letter-spacing: -0.02em可能让文字粘连，尤其在中文字体下几乎不可读
.navbar-brand 字号改不了？先看选择器权重够不够
默认字号是 1.25rem（v5.3+），但直接写 .navbar-brand { font-size: 1.5rem; } 常无效。真正起作用的是 Bootstrap 的 .navbar-nav .nav-link 和 .navbar-brand 组合规则。
- 优先用高权重选择器：
.navbar .navbar-brand { font-size: 1.375rem; }或.navbar-light .navbar-brand - 别用
rem依赖根字体：如果项目里改过html { font-size: 10px; }，那1.25rem就变成 12.5px，容易误判“没变大” - 移动端需单独处理：折叠后
.navbar-brand仍在顶部，但空间受限，建议用@media (max-width: 768px)降回1.125rem避免挤压图标 - 下拉菜单里的品牌文字不会继承这个字号 —— 它们走的是
.dropdown-item规则，别指望一处修改全局生效
粗细 + 间距 + 字号组合改，注意字体渲染实际效果
三者叠加时，浏览器渲染优先级是：字体文件支持 > font-weight 值 > letter-spacing > font-size。光调参数没用，得看最终渲染：
- 加粗 + 大字号 + 正 letter-spacing 容易让文字“发飘”，尤其在非等宽字体下；建议搭配
font-kerning: normal保持字距均匀 - 如果用了系统字体栈（如
"-apple-system, BlinkMacSystemFont"），iOS 上font-weight: 700可能触发 SF Pro Display 的 semibold，而非真正的 bold，视觉差异明显 - 调试时打开 DevTools 的「Rendering」面板，勾选「Show fonts’ bounding boxes」，能直观看到每个字符的实际占用区域，判断是不是
letter-spacing导致整体宽度溢出容器 - 真要精细控制，别拼工具类：一套
.navbar-brand.custom-brand配独立 CSS 更可控，也方便后续维护
