bootstrap 5 中无法用 fw-md-bold 等断点后缀类直接控制字体粗细，必须按断点从小到大顺序叠加 fw-light fw-md-normal fw-lg-bold 才能实现「小屏细、中屏正常、大屏粗」；opacity-* 不支持响应式，且 opacity 作用于整个元素而非仅文字，调整文字透明度应使用 color: rgba() 配合媒体查询。
Bootstrap 里没有 `opacity-*` 响应式类，也不能用 `fw-*` 直接控制透明度
字体透明度（opacity）和粗细（font-weight）在 Bootstrap 中属于完全不同的控制维度，框架本身不提供类似 opacity-sm-50 或 fw-md-bold 这样的组合类。你写 opacity-50 fw-lg-bold 是合法的，但 opacity 作用于整个元素（包括子元素），不是“仅文字透明”；而 fw-lg-bold 根本不存在——Bootstrap 的 fw- 类不支持断点后缀。
想让文字在不同断点下变粗，必须按断点顺序叠加 fw- 类
Bootstrap 5 的 fw- 类靠 CSS 层叠生效，且所有带断点的变体（如 fw-md-bold）只在对应断点及以上起作用。关键在于书写顺序：从小到大，否则后写的会被前写的覆盖。
-
fw-light→font-weight: 300（默认，适用于 xs） -
fw-md-normal→font-weight: 400（≥768px） -
fw-lg-bold→font-weight: 700（≥992px）
完整写法：fw-light fw-md-normal fw-lg-bold。如果写成 fw-lg-bold fw-md-normal，则 md 及以上全部是 bold——因为 fw-lg-bold 在 lg+ 生效，而 md 断点没被显式覆盖，会继承其声明的 font-weight: 700。
要改文字透明度，别碰 opacity，用 color 的 rgba 值更精准
opacity 会把整个元素（含边框、背景、子节点）一起变淡，不适合“只调文字透明度”。正确做法是控制 color 的 alpha 通道：
- 小屏用浅灰字：
color: rgba(0, 0, 0, 0.6) - 中屏提亮：
@media (min-width: 768px) { .my-text { color: rgba(0, 0, 0, 0.85); } } - 大屏高对比：
@media (min-width: 992px) { .my-text { color: #000; } }
注意：不要混用命名色（如 color: black）和 rgba，在媒体查询中统一用数值表示，避免浏览器映射差异导致断点切换异常。
字体粗细生效的前提是字体文件真支持对应字重
即使你写了 fw-bold，DevTools 显示 font-weight: 700，也不代表加粗成功。打开 Computed 面板，点开 font-family 查看实际加载的字体文件名（比如 inter-var-latin.woff2），确认它是否声明了 weight 700 支持。常见坑：
- Google Fonts 只加了
&family=Inter:wght@400，没加;700→ 浏览器模拟加粗，字形发虚 - 本地
@font-face没为不同字重单独声明src，共用一个 URL → 所有font-weight都 fallback 到 400 - 用了可变字体（如 Inter Variable），但没启用
font-variation-settings: 'wght' 700→ 数值font-weight可能被忽略
真正起作用的是字体文件能力，不是 CSS 类名。类名只是开关，不是资源包。
