font-family是继承的。如何在chrome开发人员窗格中找到font-family？

Question

在Chrome的开发者窗格中，我可以看到元素的这些css设置。

据我所知，每个font-family值都是继承。

如何找到字体系列的实际值？我如何跟踪来自继承层次结构的root font-family值的定义？

Answer 1

Developer Tools > Elements > Computed > Rendered Fonts

您附加到问题的图片会显示Style标签。如果您切换到下一个标签Computed，则可以检查呈现字体系列的渲染字体。

Answer 2

inherit value在使用时表示属性的值设置为父元素的相同属性的值。对于根元素（在HTML文档中，对于html元素），没有父元素;根据定义，使用的值是属性的初始值。为CSS规范中的每个属性定义初始值。

font-family property是特殊的，因为初始值在规范中没有固定，但被定义为依赖于浏览器。这意味着使用浏览器的默认字体系列。该值可由用户设置。

如果从根元素到当前元素存在连续的元素链（在父子关系意义上），则所有font-family设置为inherit或者根本不设置任何样式表（也会导致继承），然后字体是浏览器的默认值。

但是，这是无趣的。如果您根本不设置字体，将使用浏览器默认值。您真正的问题可能会有所不同 - 您似乎正在查看构成浏览器样式表的样式表部分。可能还有其他更有趣的样式表会影响这种情况。

Answer 3

对于这种情况，您的浏览器的默认字体系列将被继承。

您可以在Chrome中检查浏览器默认字体： 设置＆gt;网络内容＆gt;自定义字体......

Answer 4

我认为操作系统想要知道网页上使用的字体是什么，并希望在“检查”中找到相关信息。窗格。

尝试添加Whatfont Chrome扩展程序。