<p>Bootstrap 5.3+ 中 fs- 支持断点后缀（如 fs-md-4），而 fw- 始终不支持任何断点后缀；字体粗细需通过自定义媒体查询实现响应式，不可依赖原生 fw-* 类。</p>
Bootstrap 5.3+ 中 fs-* 和 fw-* 类的断点叠加规则不通用
字体大小（fs-*）和字体粗细（fw-*）在 Bootstrap 中响应式行为完全不同：前者从 5.3 版本起支持断点后缀（如 fs-md-4），后者**始终不支持**任何断点后缀（fw-sm-bold 是无效类名）。别被 fs-md-* 的写法误导，以为 fw-md-bold 也能用——它根本不存在于 Bootstrap 的 CSS 文件里。
常见错误现象是写了 fw-lg-bold fw-md-normal，结果所有尺寸都是 bold；或者把 fs-lg-3 fw-lg-bold 当作同一体系使用，发现粗细根本不随断点变化。
-
fs-*类依赖clamp()和预编译媒体查询，只在 Bootstrap ≥5.3 且未篡改根字号时生效 -
fw-*类全是全局静态声明，比如.fw-bold { font-weight: 700 !important; }，没有媒体查询包裹 - 试图混用（如
fw-bold fs-md-4）只会让字重固定为 bold，字号按断点变——粗细不会跟着变
怎么写出「小屏细、中屏正常、大屏粗」的字体粗细
必须放弃“一个类搞定”的幻想，靠纯 CSS 媒体查询定义自定义类，或严格按层叠顺序叠加原生 fw-* 类（仅适用于简单线性升级场景）。
如果真要用原生类实现，唯一可行路径是从小断点开始逐级覆盖，且顺序不可颠倒：
- 先写最宽松的规则：
fw-light（对应font-weight: 300） - 再写中等断点增强：
fw-md-normal（注意：这不是 Bootstrap 原生类，需自行定义） - 最后写大断点强化：
fw-lg-bold（同样非原生，需自定义）
但更实际的做法是直接定义语义类，例如：
@media (min-width: 768px) {
.text-emphasis-md {
font-weight: 400;
}
}
@media (min-width: 992px) {
.text-emphasis-lg {
font-weight: 700;
}
}然后在 HTML 中写：<p class="text-emphasis-md text-emphasis-lg">文字</p>。注意：不要加 !important，Bootstrap 的 fw-* 类权重太高（1000），你的媒体查询规则只要选择器明确（如类名组合），就能自然覆盖。
怎么让字体大小和粗细同步响应不同断点
不能指望一个 class 同时控制两者，得拆开处理：字号用 fs-* 断点类（Bootstrap 5.3+），粗细用自定义媒体查询类，二者共用同一断点阈值才不会错位。
- 确认你用的是 Bootstrap 5.3 或更高版本，运行
console.log(bootstrap?.version)验证 - 字号写法必须从小到大：
fs-4 fs-md-3 fs-lg-2，反序会失效 - 粗细类名建议与断点对齐，比如定义
.fw-md-400和.fw-lg-700，避免混用关键字（bold）和数字（700） - 如果用了可变字体（如 Inter），可用
font-variation-settings: "wght" 300;在媒体查询中精细调节，比离散的fw-*更平滑
容易被忽略的兼容性和可访问性问题
字体粗细在小屏突然变细（比如从 fw-bold 切到 fw-light）会显著降低可读性，尤其在 OLED 屏幕或弱光环境下；斜体（fst-italic）在移动端长段落中更易引发阅读疲劳，且屏幕阅读器可能误判语义。
- 别为了“设计感”在小屏降字重——正文至少保持
font-weight: 400起步 - 避免在
fw-*类上叠加!important，否则自定义媒体查询无法覆盖 - 第三方组件（如 Select2、Flatpickr）内部文本不受任何
fs-*或自定义粗细类影响，必须单独加样式 - Safari ≤13.1 不支持
clamp()，fs-md-*会 fallback 到最小值，看起来像没生效
真正需要响应式文字表现时，优先检查是否该动布局或字号，而不是强行切换字重——多数情况下，用户真正需要的是更好的对比度或留白，不是更细的字体。
