font-weight 可靠值为100–900（步长100）及关键词normal（=400）、bold（=700）；lighter/bolder因依赖父级且行为不可控，不推荐使用；实际生效取决于字体是否提供对应字重文件。
font-weight 支持哪些值，哪些是可靠的
浏览器对 font-weight 的支持其实挺分裂的：数值型（如 400、700）最稳，关键词（如 normal、bold）只是别名，背后还是映射到具体数字；而像 lighter、bolder 这种相对值，依赖父元素权重，行为难预测，基本不建议用。
常见可靠取值如下：
-
100–900，以 100 为步长，但不是所有字体都提供全部字重——比如多数系统默认字体只内置400（常规）和700（粗体） -
normal等价于400，bold通常等价于700，但取决于字体本身的定义 - 使用自定义字体（如
@font-face）时，必须显式声明font-weight范围，否则即使你写了font-weight: 600，浏览器也可能 fallback 到400
为什么设了 font-weight 却没变粗
最常见原因不是 CSS 写错了，而是字体本身不支持对应字重。浏览器不会“模拟加粗”，它只会找已加载的、匹配 font-weight 值的那个字体文件。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具 → Elements 面板 → 检查元素的
font-weight计算值，看是否被覆盖或重置 - 在 Fonts 标签页（Chrome）里确认当前实际加载的是哪个字体文件，它的
weight声明是多少 - 如果用了网络字体，检查
@font-face中是否漏写了font-weight: 500这类声明，或src指向的文件压根没这个字重 - 避免用
font简写属性覆盖掉font-weight—— 比如font: 16px/1.4 sans-serif会把font-weight重置为normal
font-weight: 600 在不同浏览器渲染效果不一致
这不是 bug，是字体设计和浏览器渲染策略共同导致的。比如 macOS 的 San Francisco 字体，600 和 700 实际可能是同一套轮廓数据；而 Windows 的 Segoe UI 对 600 支持更弱，常 fallback 到 400 或 700。
应对方式很务实：
- 优先用
400/700这两个最广泛支持的档位，视觉区分足够且稳定 - 若必须用
500、600，确保字体文件明确提供了该字重，并在@font-face中完整声明 - 不要依赖
font-weight做关键信息层级判断（比如“必须比标题细一点”），改用 class 控制或配合font-size、color组合表达
用 font-weight 实现文字加粗时的性能注意点
每次新增一个 font-weight 值，就可能触发一次额外字体下载（尤其 Web Font）。比如你同时用了 400、600、700，而字体服务商只提供了两个文件（常规 + 粗体），那 600 很可能被降级或渲染异常。
精简策略：
- 用
font-display: swap减少阻塞，但别指望它修复字重缺失 - 避免在
@font-face中声明大量未使用的font-weight范围（如font-weight: 100 900），这会让字体加载逻辑变复杂 - CSS 中慎用通配符选择器设置
font-weight，容易意外覆盖按钮、输入框等原生控件的默认粗细
600 就一定有对应字形——其实它大概率不存在，除非你亲眼在字体文件列表里见过。 
