font-bold 对应 font-weight: 700，font-medium 对应 font-weight: 500；效果取决于字体是否提供对应字重，否则浏览器会回退到最接近可用值。
直接用 font-bold 或 font-medium 就能控制字体粗细，但效果是否如预期，取决于字体本身是否提供对应字重——不是加了类就一定“变粗”。
font-bold 和 font-medium 对应的 font-weight 值是多少
这两个类在 Tailwind 默认配置中分别映射为：
-
font-bold→font-weight: 700 -
font-medium→font-weight: 500
它们不是模糊关键字（比如 bold 或 medium），而是明确的数值。这意味着：如果当前字体（如某个自定义 @font-face 引入的字体）没有 700 或 500 字重，浏览器会 fallback 到最接近的可用值，可能渲染成 600、400，甚至不变。
为什么加了 font-bold 看起来没变化
常见原因有三个：
- 当前字体只包含
400（normal）和700，但你用的是系统默认sans-serif，而某些系统（如旧版 macOS）对700的渲染偏弱 - 父级元素设置了
font-weight: 400 !important，强行覆盖了子元素的font-bold - CSS 中存在
font: inherit或all: unset类重置行为，清除了 font-weight 继承链
验证方法：打开 DevTools，检查元素 computed 样式里的 font-weight，看最终计算值是不是 700；如果不是，往上查继承来源或是否有强制覆盖。
如何安全地让 font-medium / font-bold 生效
确保字重真正起作用，得从字体支持和 CSS 层级两头抓：
- 用
@layer base在tailwind.config.js的css入口里显式声明字体族，并优先指定带多字重的字体，例如：font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
（Inter 官方提供 100–900 全字重） - 避免在通用重置样式中写
font-weight: inherit，尤其不要在* {}或body {}里无差别设置 - 需要强控制时，可配合
font-[500]或font-[700]这类 arbitrary value 写法，绕过预设类的映射限制（需启用experimental.optimizeUniversalDefaults或确保配置允许 arbitrary values）
响应式场景下 font-medium 和 font-bold 的使用陷阱
写 md:font-bold sm:font-medium 是合法的，但要注意断点类的叠加顺序和覆盖逻辑：
- Tailwind 按 HTML class 列表顺序应用样式，后写的类优先级更高；所以
font-medium md:font-bold在中屏及以上会生效font-bold，没问题 - 但如果写成
md:font-bold font-medium，则在非中屏设备上，font-medium会覆盖掉原本可能继承的font-normal，而在中屏上又变成font-bold——这种“反向覆盖”容易让人误判默认状态 - 更稳妥的做法是统一以最小断点为基线，例如：
font-normal sm:font-medium md:font-bold
字体粗细的响应式控制看似简单，实际效果高度依赖字体文件完整性、CSS 层叠路径和浏览器字重匹配策略——别只盯着 class 名，要盯住最终渲染出的 font-weight 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
