为何@font-face中设置font-weight仍需在元素中重复配置？

一、@font-face 中设置 font-weight 的作用 #

@font-face 里的 font-weight 是用来给你引入的字体文件绑定对应字重标识。浏览器通过这个属性，能明确知道当页面元素指定某个字重时，该调用哪个字体文件。比如你给某字体文件设置font-weight:400，就相当于告诉浏览器：这是Poppins字体的常规字重版本；如果后续再引入粗体字体文件并设置font-weight:700，浏览器就会在元素需要700字重时自动调用它。

简单来说，这个属性是给字体文件“打标签”，让浏览器能精准匹配元素的字重需求。

二、为什么你设置的 @font-face font-weight 没生效？ #

核心原因是h1元素自带默认字体权重：浏览器默认给h1标签设置了font-weight:bold（对应数值700），但你只定义了Poppins字体的400字重版本，没有提供700字重的字体文件。

当浏览器渲染h1时，会优先查找font-family:'Poppins'且font-weight:700的字体文件，找不到的话，就会用系统默认方式模拟粗体效果（把400字重的字体强制加粗变形），而不会自动降级使用你定义的400字重版本。

只有手动给h1设置font-weight:400时，浏览器才会匹配到你定义的400字重Poppins字体，从而显示正常的常规字重样式。

内容的提问来源于stack exchange，提问作者Andrei