fw-bold无效的根本原因是字体文件不支持font-weight:700，导致浏览器模拟加粗引发模糊；解决需确保字体加载含对应字重、正确声明font-family并配合合适font-weight值。
fw-bold为什么加了没反应
加了 fw-bold 类但文字没变粗，大概率不是类没生效，而是字体文件压根不支持 font-weight: 700。浏览器会用算法模拟加粗，小字号下边缘发虚、字形撑开，甚至行高异常——这在 .badge 这种小尺寸组件里特别明显。
- 打开 DevTools → Elements → Computed → 查
font-family实际加载的文件名（比如inter-var-latin.woff2），再确认该字体是否真包含 weight 700 - Google Fonts 引入时必须带字重参数：
&family=Inter:wght@400;700，缺了;700就只能回退到模拟加粗 - 本地
@font-face需为不同字重单独声明，不能共用一个src -
fw-bolder和fw-lighter是相对值，嵌套三层以上行为不可控，移动端 WebView 尤其容易错乱，生产环境别用
怎么让 badge 文字真正变粗（且清晰）
关键不是“加类”，而是确保字体 + 字重 + 渲染三者匹配。直接改 .badge 全局样式风险大，推荐用自定义 class 控制：
- 写死
font-weight值并加!important（因为 Bootstrap 工具类优先级高）：.badge-fw600 { font-weight: 600 !important; } - 如果需要
fw-500或fw-800这类非标准值，必须手写 CSS，Bootstrap 不生成数字类 - 内联
style="font-weight: 600"有时不生效，常见于第三方封装的 Badge 组件——它内部可能用了!important或 CSS-in-JS 动态插入更高权重规则，此时要提高选择器权重，比如用.my-btn .badge替代单纯.badge - 父容器设了
font-family（比如body { font-family: "Roboto"; }），.badge会继承，此时只需补全缺失字重，不用重复声明整个字体栈
为什么 font-weight: 600 写对了还是糊
问题常出在渲染层：小字号（如 0.625rem）下，即使字重正确，若字体文件没启用 hinting 或缺少对应字重，仍会发虚。这不是 CSS 能解决的。
- 验证方式：DevTools → Computed → 看
font-family加载的是否是变量字体（如Inter-Variable），变量字体对字重切换更友好 - 避免用
fw-semibold对应小字号 badge——fw-semibold是600，但很多免费字体只提供400和700，中间档靠模拟，糊得更明显 - 真要兼顾小字号和清晰度，优先选支持多字重的字体（如 Inter、IBM Plex Sans），并确保 Webfont 加载完整
别踩的坑：字体栈和继承干扰
.badge 默认用 system-ui, -apple-system, sans-serif，不绑定具体字体文件。想换字体，必须显式声明 font-family，且要加在自定义 class 或内联 style 里——直接改 .badge 全局样式会破坏按钮、导航等其他组件的字体继承逻辑。
- 推荐写法：
.badge-custom { font-family: "Inter", system-ui, sans-serif; }，并确保字体已正确加载 - 如果父容器设了
font-size: 1.25rem，.badge的0.75rem会按比例放大，导致实际字号变大、字重感知减弱 -
fw-类只设置font-weight，不加载字体文件——这点最容易被忽略，光加类没用，字体本身得支持
