font-weight数值不生效主因是字体不支持该字重;需确认是否为可变字体、检查@font-face声明与字体元数据匹配,并用开发者工具验证实际解析值。

font-weight 数值不生效?先确认是否用了可变字体
绝大多数情况下,font-weight 设为 250、375 这类非整百数却没效果,不是写法错,而是当前字体压根不支持这些字重。浏览器只会找字体文件里实际存在的 weight 值,找不到就降级到最接近的可用值(比如 fallback 到 400 或 700)。
- 查字体是否支持:用浏览器开发者工具选中文字,在
Computed面板看font-weight实际解析值,再点开对应字体名,查看其font-stretch/font-variation-settings信息 - 系统字体(如
"Segoe UI"、"San Francisco")在 macOS/iOS 上支持细粒度字重,但 Windows 下通常只认100–900中的几个离散档位 - Google Fonts 上标“Variable”标签的字体(如
"Inter"、"Source Sans Pro")才真正支持连续数值;普通链接的非 variable 版本即使写了font-weight: 320也无效
font-weight: 400 和 normal 到底等不等?
等,但仅限于常规文本场景。CSS 规范规定 normal 是 font-weight 的初始值,计算后等于 400;bold 等于 700。但这个映射不是绝对的——如果字体家族里根本没有 400 这一档,浏览器会取最接近的可用字重(比如只有 300 和 500,那 normal 可能渲染成 500)。
- 避免混用:
font-weight: normal和font-weight: 400在同一项目里交替出现,容易让人误判一致性 - 继承行为要注意:父元素设了
font-weight: 600,子元素写font-weight: normal,结果是继承父级的600吗?不是——normal始终解析为400,除非父级显式设了font-weight: inherit - 不要依赖
bold:它只是700的别名,而很多字体根本没有700档,此时会 fallback 到600或800,行为不可控
自定义字体中 font-weight 声明不匹配怎么办?
你用 @font-face 引入了一个叫 "MyFont-Light" 的文件,但在 CSS 里写 font-weight: 300 却没生效,大概率是 @font-face 块里漏写了 font-weight 声明,或者声明的值和实际字体元数据对不上。
-
@font-face中的font-weight不是“建议值”,而是告诉浏览器:“这个文件代表字重区间”,必须与字体文件内嵌的 OS/2 table 中 usWeightClass 值一致(常见对应:300 → 300,600 → 600,但有些字体把 Light 标为250,这时你得写font-weight: 250) - 用
font-display: swap时更明显:字体加载前用系统字体撑开,加载后替换,若@font-face字重声明错误,替换后可能突然变细/变粗,视觉跳变 - 验证方法:下载字体文件,用 FontForge 或 online-font-editor 打开,看
Element → Font Info → OS/2 → Weight Class数值
font-variation-settings 能替代 font-weight 吗?
能,而且更精确,但代价是兼容性收窄。当字体是可变字体(variable font)时,font-variation-settings: "wght" 372 可以实现任意整数精度的字重控制,绕过 font-weight 的离散限制。
立即学习“前端免费学习笔记(深入)”;
- 优先用
font-weight:只要字体支持,就别上font-variation-settings,因为前者语义清晰、可继承、支持动画,后者是底层控制,CSS 动画对它支持有限(Chrome 支持插值,Safari 早期版本不支持) - 不能混搭:同时写
font-weight: 400和font-variation-settings: "wght" 400,后者会覆盖前者;但若只写后者,font-weight就完全失效 - 注意重置风险:用
all: unset或all: revert会清掉font-variation-settings,但不会影响font-weight,这点常被忽略
font-weight: 550,而是没意识到这个 550 根本不存在于当前字体里。










