Menu
In the Chrome's developer pane, I can see these css settings of an element.
As far as I can see, every single font-family value is 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?
427
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...
You simply click the Visual Inspector icon in the Chrome menu to activate the tool, then head over to the Typography section in the dropdown. You are now presented with the font families used with an additional breakdown of all the typography within the webpage.
The inherit option means it will receive the body's font family. To change to a different font family, you can do that from font manager.
inherit in CSS simply means it inherits the values from parent element, so for example: <div style="font-family: Arial;"> <p style="font-family: inherit; /* This will inherit the font-family of the parent p*/"> This text will be Arial..And inherit is default behavior of the browser </p> </div>
Developer Tools > Elements > Computed > Rendered Fonts
The picture you attached to your question shows the Style tab. If you change to the next tab, Computed, you can check the Rendered Fonts, that shows the actual font-family rendered.
160
The inherit value, 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 html element) 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.
The font-family property is 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.
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-family set to inherit or not set at all in any style sheet (which also causes inheritance), then the font is the browser default.
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
