CSS 字体系列是继承的。如何在chrome开发人员窗格中找出字体系列?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17637453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:31:45  来源:igfitidea点击:

font-family is inherit. How to find out the font-family in chrome developer pane?

cssgoogle-chromefont-family

提问by Anthony Kong

In the Chrome's developer pane, I can see these css settings of an element.

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

enter image description here

在此处输入图片说明

As far as I can see, every single font-familyvalue is inherit.

据我所知,每个font-family值都是inherit

How can I find what is the actual value of the font family? And how can I trace the definition of the root font-family value come from the inheritance hierarchy?

如何找到字体系列的实际值?以及如何跟踪来自继承层次结构的根 font-family 值的定义?

回答by Rafael Eyng

Developer Tools > Elements > Computed > Rendered Fonts

Developer Tools > Elements > Computed > Rendered Fonts

The picture you attached to your question shows the Styletab. If you change to the next tab, Computed, you can check the Rendered Fonts, that shows the actual font-family rendered.

您附加到问题的图片显示了该Style选项卡。如果您切换到下一个选项卡 ,Computed您可以检查渲染字体,它显示了实际渲染的字体系列。

Developer Tools >Elements >Computed >Rendered Fonts

开发人员工具 >元素 >计算 >渲染字体

回答by Jukka K. Korpela

The inheritvalue, when used, means that the value of the property is set to the value of the same property of the parent element. For the root element (in HTML documents, for the htmlelement) there is no parent element; by definition, the value used is the initial value of the property. The initial value is defined for each property in CSS specifications.

inherit,当使用时,意味着该属性的值被设置为父元素的相同的属性的值。对于根元素(在 HTML 文档中,对于html元素)没有父元素;根据定义,使用的值是属性的初始值。CSS 规范中为每个属性定义了初始值。

The font-familypropertyis special in the sense that the initial value is not fixed in the specification but defined to be browser-dependent. This means that the browser's default font family is used. This value can be set by the user.

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

If there is a continuous chain of elements (in the sense of parent-child relationships) from the root element to the current element, all with font-familyset to inheritor not set at all in any style sheet (which also causes inheritance), then the font is the browser default.

如果从根元素到当前元素有一个连续的元素链(在父子关系意义上),在任何样式表中都font-family设置为inherit或根本不设置(这也会导致继承),那么字体是浏览器的默认设置。

This is rather uninteresting, though. If you don't set fonts at all, browsers defaults will be used. Your real problem might be different – you seem to be looking at the part of style sheets that constitute a browser style sheet. There are probably other, more interesting style sheets that affect the situation.

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

回答by Heejin

Your browser's default font-family will be inherited for that case.

在这种情况下,您的浏览器的默认字体系列将被继承。

You can check the browser default font in chrome: Settings > Web content > Customize fonts...

您可以在 chrome 中检查浏览器默认字体: 设置 > 网页内容 > 自定义字体...

enter image description hereenter image description here

在此处输入图片说明在此处输入图片说明

回答by Daine

I think op wants to know what the font that is used on a webpage is, and hoped that info might be findable in the 'inspect' pane.

我认为 op 想知道网页上使用的字体是什么,并希望可以在“检查”窗格中找到这些信息。

Try adding the Whatfont Chrome extension.

尝试添加 Whatfont Chrome 扩展程序。