badge字体更换需显式声明font-family并确保字体文件支持对应字重，推荐自定义class如.badge-custom{font-family:"inter",system-ui,sans-serif;}，同时验证字体文件是否含所需weight且启用hinting以避免小字号发虚。
Badge文字字体怎么换？别动.badge类本身
Bootstrap 5 的 .badge 默认用系统字体栈（system-ui, -apple-system, sans-serif），不绑定特定字体文件。想换字体，必须显式声明 font-family，且要加在自定义 class 或内联 style 里——直接改 .badge 全局样式会破坏按钮、导航等其他组件的字体继承逻辑。
- 推荐写法：
.badge-custom { font-family: "Inter", system-ui, sans-serif; }，并确保 Inter 字体已通过 Google Fonts 或本地@font-face正确加载 - Google Fonts 引入时必须带字重参数，例如：
&family=Inter:wght@400;500;700，否则fw-semibold这类类名会回退到浏览器模拟加粗，小字号下边缘发虚 - 如果父容器设了
font-family（比如body { font-family: "Roboto"; }），.badge会继承它，此时只需补全缺失字重，不用重复声明整个字体栈
文字粗细用fw-类，但得看字体支不支持
fw-bold 对应 font-weight: 700，fw-semibold 是 600，这些是固定数值映射，不是“视觉上加粗一点”。问题常出在字体文件没提供对应字重，浏览器只能算法模拟，导致小字号文字模糊、撑开行高。
- 验证是否真生效：打开 DevTools → Computed → 找
font-family实际加载的文件名（如inter-var-latin.woff2），再查该字体是否含 weight 700 - 别用
fw-bolder或fw-lighter嵌套——它们依赖父级当前值计算，三层以上行为不可控，移动端 WebView 尤其容易错乱 - 需要
fw-500或fw-800？手写 CSS：.fw-500 { font-weight: 500 !important; }，!important是必须的，因为 Bootstrap 原生类优先级更高
内联style="font-weight: 600"为什么有时不生效？
常见于第三方组件或框架封装的 Badge 中。内联 style 被覆盖，通常不是权重不够，而是组件内部用了 !important 或 CSS-in-JS 动态插入更高优先级规则。
- 先检查 DevTools 的 Styles 面板，看哪条规则被划掉，定位冲突来源
- 临时调试可用
!important强制，但生产环境应提高选择器权重，比如用.my-badge .badge替代单纯.badge - 注意：Bootstrap 的
fw-类只设置font-weight属性，不加载字体文件——这点最容易被忽略，光加类没用，字体本身得支持
字号变小后文字发虚？其实是字重和渲染的锅
当给 Badge 加 fs-6 或自定义小字号（如 font-size: 0.625rem）时，若同时用了 fw-bold，文字边缘容易发虚。这不是 CSS 写错了，而是浏览器对小尺寸+高字重的渲染限制。
- 解法不是降字号，而是换更细的字重：小字号配
fw-normal（400）或fw-semibold（600），比硬上 700 更清晰 - 如果必须用 700，确保字体文件包含 hinting 信息（比如 Inter Variable 或 Roboto Flex），普通 TTF 在小尺寸下渲染质量差
- 移动端 Safari 对 subpixel 渲染更敏感，同一段代码在 iOS 和 Android 上表现可能不同，建议在真机上验视效
