为父容器设置font-weight属性后子元素字体显示模糊是什么原因？

• 浏览器默认样式优先级更高：主流浏览器的内置用户代理样式表会为<h1>标签默认设置font-weight: bold（对应字重数值700），父元素的继承样式优先级低于元素自身的默认样式，因此删除h1自身的font-weight:500声明后，h1实际生效的字重为700，而非父容器设置的500。
• 缺失对应字重的字体文件：你引入的Roboto字体仅加载了300、500两个字重的资源，没有700字重的字体文件。当浏览器无法匹配到对应字重的字体资源时，会对现有字体进行算法仿粗处理，这种强行拉伸的渲染效果就会出现字体模糊、边缘发虚的问题。

• 方案1：显式指定h1继承父级字重，添加如下CSS即可：

h1 {
  font-weight: inherit;
}

• 方案2：引入字体时添加需要的700字重资源，如果业务场景确实需要使用bold字重，可以调整字体引入参数加载对应字重。
• 方案3：保留原有代码中h1的font-weight:500显式声明，直接为目标元素指定字重本身就是符合规范的正确写法。

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