直接修改 .badge 的 font-size 即可生效，但需确保选择器权重足够、样式表加载顺序在 Bootstrap 之后，并注意父容器 font-size 和 vertical-align 对齐的影响。
直接修改 .badge 的 font-size 就够了，但要注意层级和响应式干扰
Bootstrap 4 的 .badge 默认使用 font-size: 0.75rem（即 12px），它本身没有额外的 !important，所以常规 CSS 覆盖是有效的。但常见问题不是“改不了”，而是改了没生效——多半因为选择器权重不够，或被媒体查询覆盖。
实操建议：
- 用更具体的选择器，比如
.my-badge类配合.badge：.badge.my-badge { font-size: 0.875rem; } - 避免直接在
.badge上全局覆盖，否则会影响所有徽章（包括.badge-pill、.badge-primary等变体） - Bootstrap 4 的响应式断点（如
sm、md）不作用于.badge，所以不用考虑@media冲突，除非你自己写了
如果用了 .badge-pill，圆角和内边距会放大文字视觉尺寸
圆角徽章（.badge-pill）本身没有改 font-size，但它把 padding 加到了 0.25em 0.4em，比普通徽章（0.25em 0.4em → 实际一样，但视觉上更饱满）更“撑开”。文字大小不变，但看起来更大——这是错觉。
要统一视觉效果：
立即学习“前端免费学习笔记（深入）”；
- 单独给
.badge-pill设定font-size，别依赖继承 - 若想保持紧凑，可同步调小
padding，比如：.badge-pill.my-smaller { font-size: 0.625rem; padding: 0.15em 0.3em; } - 注意
line-height默认是1，改font-size后若出现上下偏移，需显式重设line-height: 1
自定义类名比覆盖 !important 更安全
有人试过加 !important 强制覆盖，短期能用，但后续升级 Bootstrap 或引入其他 CSS 框架时容易冲突。Bootstrap 4 的 CSS 是按源码顺序加载的，只要你的样式表在 Bootstrap 之后引入，且选择器足够具体，就不需要 !important。
推荐写法：
- HTML 中写：
<span class="badge badge-success my-badge-lg">New</span> - CSS 中写：
.my-badge-lg { font-size: 1rem; vertical-align: baseline; } -
vertical-align: baseline很关键——默认是baseline，但某些父容器（如.btn）里徽章会因行高差异“下沉”，加这一句能对齐
字体缩放失效？检查是否被 rem 基准或父元素 font-size 干扰
Bootstrap 4 全局用 rem，根元素（html）默认 16px。如果你改了 html { font-size: 10px; }（常见于适配方案），那 0.75rem 就变成 7.5px，再设 0.875rem 也才 8.75px——看着还是小。
排查步骤：
- 打开浏览器开发者工具，选中徽章，看
Computed面板里font-size最终解析值是多少 - 检查是否被父元素设置了
font-size（比如.btn里嵌套徽章，而按钮自己设了font-size） - 临时换用
px测试，确认是不是rem计算链的问题：.my-badge { font-size: 14px; }
vertical-align 和父容器的行高互动——文字大小改对了，但徽章飘在按钮上方或沉在底部，用户第一反应会以为“没改成功”。 
