6

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!

stupidkid
  • 410
  • 1
  • 6
  • 17
  • FYI, `initial` is supposed to exist on its own, just like `inherit`, so you can't have `initial initial` for your background properties. – BoltClock Sep 20 '12 at 23:52

2 Answers2

8

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.

Alex Wayne
  • 178,991
  • 47
  • 309
  • 337
  • 1
    And the problem with CSS resets is that they're designed to screw up inheritance. – BoltClock Sep 20 '12 at 23:55
  • Also, the reason why IE and Opera appear to display Helvetica Neue properly is because of the `button::-moz-focus-inner` selector at the very end of the rule, which causes them to ignore **the entire rule** as per the spec, completely preventing the override from happening for any element. The reason why Chrome applies the override anyway is because [WebKit deliberately violates the spec by isolating unrecognized prefixes](http://stackoverflow.com/questions/10728360/why-can-i-not-group-browser-specific-css-selectors-for-different-browsers?lq=1#comment13940630_10728507). – BoltClock Sep 20 '12 at 23:57
  • @BoltClock: took me embarassingly long to adopt [normalize](http://necolas.github.com/normalize.css/) to avoid inheritance screw-ups – Oleg Sep 20 '12 at 23:58
  • When you specify `font: inherit` on the `html` element, it takes after the user-defined preferences. Then, naturally, anything inheriting from `html` will follow suit. – BoltClock Sep 21 '12 at 00:29
0

Here: http://jsfiddle.net/LDEt6/6/

In the large clump of selectors you redeclare the body as font: inherit.

Whymarrh
  • 13,139
  • 14
  • 57
  • 108