嵌套<div>元素导致文本字重递增？求排查原因

常见原因 #

• 字体渲染的视觉叠加：即使父元素和子元素的font-weight计算值完全相同，Chrome等浏览器在渲染多层嵌套的文本元素时，可能因为排版上下文的叠加，出现视觉上字重变粗的错觉——这是浏览器字体抗锯齿/渲染机制导致的，并非实际CSS值的叠加。
• 隐性的CSS继承叠加：如果全局样式（比如通配符选择器*）给所有元素设置了font-weight: inherit，多层嵌套后，虽然每个元素的计算值一致，但浏览器渲染时会对嵌套的文本节点进行重复的字重计算，最终呈现出更粗的效果；另外，若不小心给嵌套的容器（如div、span）重复设置了相同的font-weight值，也会触发类似的视觉问题。
• 伪元素或动态样式干扰：部分场景下，::before/::after伪元素、或者JS动态添加的样式，可能给嵌套元素间接附加了字重相关的样式，开发者工具中若只查看元素本身的样式，容易忽略这类隐性影响。

具体排查步骤 #

1. 确认计算样式一致性：在Chrome开发者工具中选中最内层文本元素，切换到「Computed」标签，查看font-weight的最终计算值。如果和外层元素完全一致，说明是浏览器渲染的视觉问题；若不一致，追踪对应的样式规则找到覆盖源头。
2. 强制统一字重测试：临时添加全局样式* { font-weight: normal !important; }，观察页面文本是否恢复一致。如果问题消失，说明是样式继承/叠加导致的，再逐步移除!important，定位到具体的冲突规则。
3. 检查全局样式规则：查看CSS中是否存在针对通用标签（div、p、span）或通配符的font-weight设置，比如是否有* { font-weight: 400; }这类可能触发多层叠加的规则。
4. 跨浏览器验证：切换到Firefox等其他浏览器查看效果，如果问题仅出现在Chrome中，可通过添加-webkit-font-smoothing: antialiased;属性优化字体渲染，缓解视觉差异。

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