Menu
Here is the link:
http://jsfiddle.net/LDEt6/
The first CSS rule sets the font-family as 'Helvetica Neue', Helvetica, Arial, sans-serif; and all other font settings in the CSS below simply state 'inherit'.. in Chrome 21 however I am getting "Times" as the computed font-family and in Firefox I am getting 'serif'. What am I missing?
Thanks!
861
When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen. The font-family property lists one or more font families, separated by commas.
If you inspect your demo in a browser using its Developer Tools, you can see that the font family of the button element comes from the browser style sheet.
I have noticed that in case of <button> tags, font-family is not inherited automatically; either I must specify it explicitly like: However, the font-family is automatically inherited in case of other tags, the <a> tag for example. Why do we have this issue with the <button> tags?
font-family. The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. Values are separated by commas to indicate that they are alternatives.
First we have:
body {
font-family : 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Cool, thats fine. But then we have:
html, body, input, button, <snipped...> {
font: inherit;
}
So font get overwritten by this rule which also applies to body, it is now inherit.
So what does inherit do? It says "use the styling property assigned to my parent element". In this case, the parent of <body> element is <html> which has no parent. So no specified font family at all at the root, so nothing can inherit.
What inherit does not do, is use the previously defined value for that element. It inherits from the parents, not the previous style that would have applied. inherit is about HTML structure, not CSS structure.
In the end, you set the entire universe to inherit a font from its parent, including all parents. So you never actually find a parent with a real set font. Instead the browser applies its default font, just so it can render something.
If you move your body font rule after to giant reset rule there, it should start working. Fonts will then inherit all the way up to the body tag, which has a real font now.
174
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
