font-weight仅支持100~900的整百数(如400、700)及normal、bold关键字,非标准值如450会被忽略并退回到最近有效值;实际效果取决于字体是否提供对应字重,否则浏览器回退或模拟加粗。

font-weight 支持哪些数值,哪些是有效的
不是所有数字都能用,font-weight 只接受特定值:400(正常)、700(粗体)是默认映射,但实际生效取决于字体是否提供对应字重。浏览器只认 100 到 900 的整百数,比如 200、500、800 —— 其他如 450 或 630 会被忽略并退回到最近的有效值(通常是 400 或 700)。
-
normal等价于400,bold等价于700,语义清晰时优先用这两个关键字 - 如果字体文件没嵌入
300字重,设了font-weight: 300也不会变细,浏览器可能直接渲染成400 - 使用 Google Fonts 等服务时,记得在链接中显式声明需要的字重,比如
&display=swap&fontweight=300,400,700
为什么设了 font-weight: 700 却没变粗
最常见原因是字体本身不支持该字重。系统字体(如 macOS 的 San Francisco、Windows 的 Segoe UI)对非 400/700 值响应有限;Web 字体若未加载对应 woff2 文件,浏览器只能回退或模拟加粗(效果生硬、发虚)。
- 用浏览器开发者工具的“Computed”面板检查
font-weight实际计算值,看是否被重写或降级 - 避免依赖
font-weight: bolder或lighter,它们行为不稳定,不同浏览器回退逻辑不一致 - 用
@font-face自定义字体时,必须为每个字重单独声明font-weight和src,不能靠一个文件撑起全部数值
font-weight 数值和实际渲染效果不匹配怎么办
这是字体设计层面的问题:同一数值在不同字体里视觉粗细差异很大。比如 Inter 的 600 可能比 Roboto 的 700 还重,而 font-weight: 900 在多数中文字体里根本不存在,强行设置等于白搭。
- 中文排版慎用
600及以上,多数 Noto Sans CJK、思源黑体只提供300、400、700三档 - 想确保加粗可靠,优先选
700+ 字体明确支持的组合,而不是盲目调高数值 - 必要时用
paint-order或伪元素 +text-shadow模拟加粗,但仅限小字号标题,正文慎用(可访问性与性能双损)
font-weight 在 CSS-in-JS 或 Tailwind 中怎么写才不踩坑
Tailwind 默认只生成部分字重(font-normal→400,font-medium→500,font-semibold→600,font-bold→700),如果你项目里用了 800,但没在 tailwind.config.js 的 theme.fontWeight 里扩展,类名就无效。
立即学习“前端免费学习笔记(深入)”;
- CSS-in-JS 如 Emotion,写
fontWeight: 700没问题,但别写fontWeight: "bold"(部分版本不识别字符串) - Tailwind 需手动配置才能用
font-black(即900):extend: { fontWeight: { black: "900" } } - Next.js App Router 下,CSS 模块或全局 CSS 中的
@layer base声明,不会影响 Tailwind 生成的类,字重必须显式注册










