Bootstrap 5 不支持断点专属字体粗细类，需用响应式自定义 CSS 实现；推荐在样式中定义如 .text-md-bold 配合 @include media-breakpoint-up(md)，并加 !important 确保优先级。
Bootstrap 中响应式字体粗细类怎么写
bootstrap 5 没有原生提供像 .fw-bold-md 这样的断点专属粗细类。所有 .fw-* 类（如 .fw-bold、.fw-normal）都是全局生效的，不带断点前缀。
想实现“小屏 normal、大屏 bold”，必须组合使用响应式工具类或自定义 CSS。
- 最简方案：用
.d-none+.d-lg-inline等显示/隐藏类包裹两套文字（但语义和可访问性略差） - 推荐方案：用 Bootstrap 的响应式断点类配合
font-weight自定义 CSS - 注意：不要试图覆盖
.fw-bold的媒体查询——它本身没媒体查询，强行加会破坏工具类一致性
如何用响应式断点控制 font-weight（推荐做法）
直接在元素上写内联样式不可靠（易被覆盖），建议在 <style></style> 或自定义 CSS 文件中定义：
@include media-breakpoint-up(md) {
.text-md-bold {
font-weight: 700 !important;
}
}
@include media-breakpoint-down(sm) {
.text-sm-normal {
font-weight: 400 !important;
}
}
然后在 HTML 中组合使用：
<p class="text-sm-normal text-md-bold">这段文字在手机上细、平板起加粗</p>
- 必须用
!important——因为 Bootstrap 的.fw-*类优先级是 10，普通类只有 10，不加容易被覆盖 - 断点名要和项目使用的 Bootstrap 版本一致（
sm/md/lg等） - 避免同时用
.fw-bold和自定义类，否则可能冲突
为什么直接加 .fw-bold 在某些断点下“失效”
不是失效，而是你没意识到它的作用域是全视口。常见误解场景：
- 你在
@media (max-width: 575.98px)里写了.fw-bold { font-weight: 400; }——这会把所有.fw-bold全局重置，包括大屏 - 用了
.navbar-brand+.fw-bold，但父容器设了font-weight: 500且未用!important，小屏下继承覆盖了 - 字体文件本身缺失 bold 字重（如只加载了 Inter-Regular），浏览器只能模拟加粗，看起来“不够 bold”，尤其在高 DPI 屏上毛边明显
移动端慎用 font-weight 变化做视觉区分
在小屏幕上，加粗文字实际可读性未必提升，反而可能因字形挤压、渲染模糊降低辨识度。更稳妥的做法是：
- 优先用颜色对比（
.text-primary）、字号（.fs-5→.fs-6）、间距（.mb-2）强化层级 - 若必须变粗，建议只在
md及以上断点启用，避开xs/sm - 检查字体加载：用
@font-face显式声明font-weight: 700对应的woff2文件，别依赖浏览器模拟
真正难的不是写对类名，而是判断该不该在某个断点下改变粗细——这取决于字体本身支持程度、设备渲染能力、以及用户是否真能感知到这个变化。
