font-bold 对应 font-weight: 700，是 Tailwind 默认配置中的数值映射；若字体不支持该字重，浏览器将回退至最接近可用值，实际效果取决于字体文件、CSS 配置与渲染引擎协同结果。
font-bold 类实际对应哪个 font-weight 值
font-bold 并不等于 font-weight: bold 这个模糊关键字，它在 Tailwind 默认配置中映射为 font-weight: 700。这是大多数字体（如 Inter、System UI、sans-serif）下视觉上“明显加粗”的常用值，但要注意：如果当前字体本身没有 700 字重（比如某些手写体或极简无衬线体），浏览器会 fallback 到最接近的可用字重，可能看起来和预期不同。
常见误区是以为 font-bold 能强制“变粗”，其实它只是设置一个数值目标；最终渲染效果取决于字体文件是否提供该字重。
如何覆盖默认的 font-bold 行为
如果你项目用的字体（例如自定义加载的 font-family: 'MyFont'）只提供了 400 和 600 两个字重，那么 font-bold（700）就无法生效——浏览器会退回到 600 或插值模拟，结果不可控。
这时需要手动调整 Tailwind 的 fontWeight 配置：
module.exports = {
theme: {
extend: {
fontWeight: {
bold: '600', // 把 font-bold 指向实际存在的字重
}
}
}
}
改完需重启构建工具（如 npm run dev），否则 class 不会更新。
font-bold 和其他 font-weight 类怎么选
Tailwind 提供了从 font-thin（100）到 font-black（900）的一整套映射，中间还有 font-extralight、font-light、font-normal、font-medium、font-semibold 等。它们不是语义标签，而是直接对应数字值：
-
font-normal→400 -
font-medium→500 -
font-semibold→600 -
font-bold→700（默认） -
font-extrabold→800
别硬记名字，遇到不确定时直接查 tailwind.config.js 里的 theme.fontWeight 定义，或者用浏览器开发者工具看最终生成的 font-weight 值。
为什么加了 font-bold 没反应
最常被忽略的原因有三个：
- 父元素设置了
font-weight: 300 !important，CSS 优先级压制了font-bold的700 - 字体未正确加载，
@font-face缺少font-weight: 700的 src，导致 fallback 到系统字体且无对应字重 - 用了
font-sans但没在fontFamily.sans配置里声明支持 700，Tailwind 生成的 CSS 规则压根没包含该字重
调试时打开 DevTools → Elements → Computed → font-weight，看最终计算值是多少、来源是哪条规则，比猜快得多。
字体字重这事，从来不是加个 class 就完事；它卡在字体资源、CSS 配置、浏览器渲染三层之间，任一环断掉，font-bold 就只是个没用的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
