CSS设置文字粗细：font-weight调整数值详解

CSS中的font-weight看似简单，实则暗藏玄机：它并非单纯靠数值控制粗细，而是深度依赖字体文件是否真实包含对应字重——浏览器仅保证400（normal）和700（bold）可靠生效，而500、600等中间值常因字体缺失而回退或模拟加粗，导致效果失真；自定义字体需精确匹配@font-face声明，系统字体通常仅提供有限几档字重，旧版浏览器兼容性更添变数。真正掌握font-weight，关键在于理解“字体先行、CSS为辅”的渲染逻辑，而非盲目设值。

font-weight 支持哪些数值，哪些是关键字

font-weight 接收两类值：无单位数字（100–900）和关键字（如 normal、bold）。数字必须是 100 的整数倍，400 等价于 normal，700 等价于 bold。浏览器只保证实现 400 和 700，其余数值是否生效，完全取决于字体文件本身是否包含对应字重——比如你设 font-weight: 600，但字体没提供“Semibold”字形，那它可能回退到 400 或直接模拟加粗（效果发虚）。

常见误区是以为设个 500 就一定比 400 明显更粗。实际中，多数系统字体（如 macOS 的 San Francisco、Windows 的 Segoe UI）只内置 300、400、600、700 四档，中间值常被忽略。

为什么 font-weight: 600 没反应，或看起来和 400 一样

本质是字体缺失对应字重，浏览器无法“无中生有”。尤其在用自定义 Web Font 时，容易漏掉加载特定字重的文件。

• 检查字体加载是否包含 font-weight: 600 对应的 @font-face 声明（比如 font-weight: 600 要配一个单独的 woff2 文件）
• 用浏览器开发者工具的“Computed”面板看最终生效的 font-weight 值，再点开字体名，确认当前文本实际渲染的是哪个字重文件
• 避免对非设计为多字重的字体强行指定中间值，例如用 font-family: "Helvetica" 时设 font-weight: 500，基本无效

font-weight 数值与 CSS 变量、继承的关系

数值型 font-weight 支持继承，且可被 CSS 变量承接，但要注意变量值必须是合法数字或关键字：

body {
  --base-weight: 500;
}
h1 {
  font-weight: var(--base-weight); /* ✅ 合法 */
}
p {
  font-weight: calc(var(--base-weight) + 100); /* ✅ 得到 600 */
}

但以下写法会失效：

• font-weight: var(--base-weight, bold) —— fallback 关键字不能混在数值上下文中
• font-weight: 500px —— 带单位直接被忽略
• 父元素设 font-weight: bolder，子元素继承后继续用 bolder，实际效果取决于字体族的相对层级，不可控

font-weight 在不同浏览器中的兼容性差异

现代浏览器都支持 100–900 数值，但老版本 Safari（≤12）对 font-weight: 100 到 300 的支持不稳定，有时强制映射到 400；IE11 完全不支持 100、200、300，只认 400–900。

如果项目需兼容旧 Safari 或 IE，建议：

• 优先使用 400/600/700 这类广泛支持的值
• 避免依赖 100 实现“极细体”，改用字体厂商提供的专用细体家族（如 "Inter Thin"）
• 用 @supports (font-weight: 100) 做特性检测，给新旧环境分层设置

字体字重不是纯 CSS 控制的开关，它是字体文件、浏览器解析、渲染引擎三者共同作用的结果。最稳妥的做法，永远是先确认字体本身提供了哪些字重，再决定怎么设 font-weight。

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