直接加 .fw-bold 类即可生效;失效主因是加载顺序错误、选择器权重不足或与内联样式冲突。

直接给 .navbar-brand 加 .fw-bold 就行
Bootstrap 5 默认用 font-weight: 500(即 .fw-medium),看着不明显加粗。你不需要写自定义 CSS,也不用改 style 属性——加个内置类 .fw-bold 就生效。失效基本就三件事:bootstrap.css 没加载完你就写了自定义样式、父容器有更高权重的 font-weight 覆盖、或者用了内联 style="font-weight: 700" 和 .fw-bold 冲突。
.dropdown-item:hover 的粗细必须手动设
Bootstrap 默认没给下拉菜单项悬停状态设粗细,所以加了 .fw-bold 也没用。你要显式写:
.dropdown-item:hover, .dropdown-item:focus {
font-weight: 600;
}
注意两点:一是必须同时写 :hover 和 :focus,否则键盘用户进不去;二是如果用了 .dropdown-menu-dark,得额外补一句:
.dropdown-menu-dark .dropdown-item:hover {
font-weight: 500;
}
深色背景下太粗反而发虚,500 更稳。
想在不同断点切换粗细?别信 .fw-sm-bold 能直接用
Bootstrap 5.1+ 才支持带断点的 fw-{breakpoint}-{weight} 类(如 .fw-md-bold),但前提是你的项目真用了 5.1 或更高版本,并且引入的是完整 CSS(不是精简版)。常见翻车点:
- 写了
.fw-sm-bold却在小屏还是细体 → 检查是否漏了.fw-normal基础类(它负责“默认态”,响应式类只是覆盖) - 大屏突然变粗得离谱 → 可能同时写了全局
.fw-bold,它优先级高于所有带断点的类 - 加粗后字形毛边 → 不是 Bootstrap 问题,是字体文件只加载了 400 字重,浏览器在模拟加粗。打开 DevTools 看 Computed 面板里的
font-family实际加载路径,确认是否含wght@700
.navbar-toggler-icon 的“粗细”根本不是字体属性
这个图标是 SVG data URL,所谓粗细其实是 <path stroke-width="2"></path> 里的数字。改 font-weight、border、padding 全无效。要加粗,得重写整个 background-image,比如把 stroke-width='2' 改成 stroke-width='3',并确保 URL 编码正确( → <code>%3C,' → %27)。漏掉任意一个编码字符,图标就消失。另外,加粗后容易上下偏移,建议同步微调 background-position: 50% 50%。











