最常见原因是字体文件本身不支持对应字重，如仅引入inter:wght@400时，fw-bold（font-weight: 700）会触发浏览器模拟加粗，导致字形发虚、边缘毛糙；需通过devtools检查computed中font-weight是否真实生效及font-family实际加载的文件是否含对应字重。
fw-*类加了但字体没变粗，怎么回事
最常见原因是字体文件本身不支持对应字重。比如你只引入了 inter:wght@400，那 fw-bold（对应 font-weight: 700）就只能靠浏览器模拟加粗——字形发虚、边缘毛糙、宽度异常。
验证方法：打开 DevTools → Elements → Computed 标签页，看 font-weight 是否真变成 700，再点开 font-family 查看实际加载的字体文件名（如 inter-var-latin.woff2），确认它是否声明了 weight 700 支持。
- Google Fonts 必须显式加
&display=swap&family=Inter:wght@400;700 - 本地
@font-face需为不同字重单独声明，不能共用一个src -
fw-bold这类类名只是设置 CSS 属性，不打包字体资源
想用 fw-500 这种数字字重怎么办
Bootstrap 默认不生成 fw-500、fw-600 等类名，得靠 Sass 扩展。
在自定义 _custom.scss 中提前定义变量，再导入 Bootstrap：
$font-weight: ( "normal": 400, "medium": 500, "semibold": 600, "bold": 700 ); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities/text";
这样就能用 fw-medium 或 fw-semibold 了。注意：Sass 编译必须启用，CDN 引入的 bootstrap.min.css 无法生效。
响应式屏幕下动态切换 font-weight
Bootstrap 没提供原生的“响应式 font-weight”机制。RFS（font-size()）只管字号，不管粗细。
真要按屏幕改粗细，只能手动写媒体查询：
.my-text {
font-weight: 400;
}
@media (min-width: 768px) {
.my-text {
font-weight: 500;
}
}
@media (min-width: 992px) {
.my-text {
font-weight: 600;
}
}
别试图把 fw-* 类和 media 混搭——类名是静态的，不会随视口自动切换。
- 如果项目已用 Sass，建议抽成 mixin 复用
- 避免在 JS 里动态切换 class 控制粗细，性能差且难维护
- 移动端慎用过粗字重（如
800），小屏下易糊、耗电量高
表格、卡片等组件内文字怎么统一加粗
组件内部文字通常不继承外层 fw- 类，因为它们的样式由独立变量控制。
例如 Bootstrap Table 的文字粗细由 $table-head-font-weight 和 $body-font-weight 决定，不是靠类名驱动。
正确做法是在自定义 Sass 中重设变量：
$body-font-weight: 500; $table-head-font-weight: 600; @import "bootstrap";
这样所有 .table th、p、span 等都会按新值渲染，比挨个加 fw- 类更可靠。
第三方插件（如 select2）字体完全不受影响，必须单独加 CSS 规则或用全局 html { font-weight: 500 }（慎用，可能破坏图标渲染）。
