CSS字体加粗数值详解100-900

CSS中的font-weight数值（100–900）看似简单，实则深藏玄机：它是否生效，根本取决于字体本身是否真正支持该字重——非可变字体通常只提供少数离散档位，写入250、375等中间值往往被浏览器静默降级；系统字体与Google Fonts的Variable版本才有连续调节能力；而@font-face声明、字体元数据（如OS/2表usWeightClass）、开发者工具验证及font-variation-settings的精准控制，共同构成确保字重准确呈现的关键链路——别再怪代码没效果，先问问字体“答不答应”。

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，这点常被忽略

字体字重这事，表面是调个数字，背后连着字体文件结构、浏览器解析逻辑、CSS 继承规则三层东西。最常卡住人的，不是不会写 font-weight: 550，而是没意识到这个 550 根本不存在于当前字体里。

今天关于《CSS字体加粗数值详解100-900》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！