Tailwind CSS如何快速设置字体粗细_使用font-bold或font-semibold-css教程-PHP中文网

font-semibold 对应 font-weight: 600，font-bold 对应 font-weight: 700；二者是 Tailwind 预设映射，非浏览器默认，实际渲染取决于字体是否支持对应字重。

tailwind css如何快速设置字体粗细_使用font-bold或font-semibold

font-bold 和 font-semibold 对应的 font-weight 值是多少

它们不是魔法值，而是 Tailwind 预设的 CSS font-weight 映射：font-semibold 对应 font-weight: 600，font-bold 对应 font-weight: 700。这个映射写在默认配置的 theme.fontWeight 里，不是浏览器默认行为，也不是“加粗就一定更重”——如果字体本身没提供 600 或 700 字重，实际渲染可能 fallback 到最接近的可用字重，甚至视觉上毫无区别。

实操建议：

用浏览器开发者工具检查元素的 computed font-weight，确认是否真生效，而不是只看 class 名
如果设计稿要求 “Medium”（500）或 “Extra Bold”（800），别硬凑 font-semibold 或 font-bold，直接在配置里加自定义值，或用 font-[500]（需启用 JIT 及 fontFamily 扩展）
某些系统字体（如 macOS 的 San Francisco）对 600/700 区分不明显，iOS 上尤其容易“看起来一样”

为什么加了 font-bold 没反应

常见错误不是写错 class，而是字体本身不支持该字重。比如用了 Google Fonts 的 Inter，但只引入了 400,500 两个字重，那 font-bold（700）就会静默失效。

实操建议：

检查你加载的字体文件是否包含对应 font-weight，Google Fonts 的链接末尾要带 &display=swap&fontweight=400,600,700
用 @layer base 在 CSS 中显式声明字体栈，并确保 fallback 字体（如 system-ui）在各平台都提供 600/700 支持
避免在 font-sans 上盲目叠加 font-bold，有些无衬线字体（如早期 Ubuntu Font）压根没 700 字重

如何在 JS 动态控制 font-bold 和 font-semibold

不能靠字符串拼接 class 名来“切换”，因为 Tailwind 默认只生成你实际用到的类。如果 JSX 里写 className={isBold ? 'font-bold' : 'font-semibold'}，两个类必须都在源码中真实出现过，否则生产环境会丢失。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

实操建议：

在任意一个 .tsx/.jsx 文件里“占位”写一次两个 class，比如藏在注释里：{/* font-bold font-semibold */}，让 PurgeCSS 保留它们
更稳妥的是改用 style={{ fontWeight: isBold ? 700 : 600 }}，绕过 class 生成限制（适合少量动态场景）
如果用的是 Vue 或 Svelte，注意其编译器对 class 绑定的静态分析能力较弱，同样建议显式引用或改用内联 style

font-bold 在不同字体下的视觉差异比想象中大

同一套 class，在 Inter、IBM Plex Sans、system-ui 下的“粗细感”可能差一倍。这不是 bug，是字体设计本身的字重分布策略不同：有的字体 600 就很抢眼，有的 700 才刚起步。

实操建议：

不要跨字体复用“这个标题用 font-bold 就行”的经验，每次换字体都要重新校验视觉层级
用 font-variant-numeric: tabular-nums 这类辅助属性时，注意它可能影响数字字重表现，和 font-bold 叠加后意外变细
在深色背景或小字号（text-xs）下，font-semibold 有时比 font-bold 更清晰，人眼对细线对比更敏感

字体粗细从来不是开关，而是和字体文件、渲染引擎、设备像素比一起算出来的结果。调的时候多看真实设备，少信预览图。