直接改 .badge 类会破坏其他组件字体继承逻辑；正确做法是添加自定义类（如 .badge-custom）并显式声明 font-family，确保字体文件支持所需字重且已正确加载。
直接改 .badge 类会破坏其他组件字体继承逻辑
Bootstrap 5 的 .badge 默认用系统字体栈（system-ui, -apple-system, sans-serif），不绑定具体字体文件。想换字体，不能全局覆盖 .badge，否则按钮、导航等组件也会跟着变——它们依赖父级字体继承，不是靠 .badge 自身定义。
正确做法是加自定义 class，比如：.badge-custom，并在其中显式声明 font-family：
- 确保字体已加载：Google Fonts 要带字重参数，例如
&family=Inter:wght@400;500;700 - 本地字体需用
@font-face分别注册不同font-weight对应的文件 - 如果父容器（如
body）已设font-family: "Roboto"，.badge会继承它，此时只需补全缺失字重（如font-weight: 500），不用重复写整个字体栈
fw-bold 和 fw-semibold 生效但字体不支持就发虚
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 被更高优先级规则覆盖；先看 DevTools Styles 面板哪条被划掉，再针对性提高选择器权重（如用.my-badge .badge）
内联 style 改字体粗细失败，大概率是优先级或字体加载问题
不是所有 style="font-weight: 600" 都能生效。原因有两个：
- 字体文件本身没提供 weight 600，浏览器回退到模拟加粗，渲染模糊
- 第三方组件（如 Vue 封装的
BsBadge）内部用了!important或 CSS-in-JS 动态插入规则，把你的内联样式盖掉了
临时调试可用 !important 强制，但生产环境应改用更重的选择器，比如：.btn .badge-custom，并确保自定义 CSS 加载在 Bootstrap 之后。
最关键的一点：Bootstrap 的 fw- 类只设置 font-weight 属性，**不加载字体文件**——这点最容易被忽略，光加类没用，字体本身得支持。
字号变小后文字发虚，其实是字重和渲染共同导致的
给 Badge 加 fs-6 或 font-size: 0.625rem 后发虚，表面是字号小，本质是字重 + 渲染引擎的问题。小字号下，浏览器对模拟加粗的抗锯齿处理更差，边缘糊、字形变形。
- 启用字体 hinting（尤其对 Inter、Roboto 等可变字体）能缓解，但前提是字体文件支持且加载配置正确
- 避免在
font-size缩到0.625rem以下时还用fw-bold，优先选fw-semibold（600）或fw-medium（500） - 如果必须用极小字号（如
0.5rem），建议搭配text-rendering: optimizeLegibility，但注意部分旧版 Safari 不支持
真正难调的不是单个属性，而是让字体、字重、字号、DPR、渲染引擎在各种设备上协同工作——测完 PC 还得真机连 DevTools 看 iOS/Android 实际效果。
