11

Is this valid? font: bold 10px/13px inherit;

According to my reading of the specs that should mean a font-weight of 'bold', a font-family of 'inherit', a font-size of '10px', and a line-height of '13px'.

It appears to work correctly in Internet Explorer 8 (8.0.6001.18702).

It works correctly in Safari 5.0.4 (7533.20.27) on Windows.

Opera 11.01 (build 1190) and Firefox 3.6.16 both log errors about it.

I haven't tried Chrome or Firefox 4 yet.

If this is indeed supposed to be valied is this parsing bug a known issue?

A couple extra points:

  • The W3 validator also reports this as being invalid.
  • None of 'font: bold 10px inherit;', 'font: bold 10px/13px;', or 'font: bold 10px;' work correctly in firefox here either.

Update

As pointed out by Adam Wagner in his answer my attempted value is in fact not valid (despite what my naive reading of the spec suggested) due to § C.3.1 of the CSS2.1 spec.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Etan Reisner
  • 77,877
  • 8
  • 106
  • 148
  • For some reason it works fine in Firefox when not using `inherit` on the font-family... – Czechnology Apr 01 '11 at 20:39
  • It isn't working fine that way here. What version of firefox are you using? – Etan Reisner Apr 01 '11 at 20:47
  • FireFox 4.0 here. I meant specifing the font explicitly, not leaving it out. See my ["answer"](http://stackoverflow.com/questions/5518500/is-this-font-shorthand-property-syntax-valid-my-reading-of-the-spec-says-yes/5518681#5518681) below. – Czechnology Apr 01 '11 at 20:49

5 Answers5

10

I think the issue is with the "inherit" addition to your value.

Per the specs:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | inherit

I think the bold section I listed above is one option, and "caption", "icon", "menu", "message-box", and "inherit" are the remaining options.

In short, try: font: bold 10px/13px

Update:

It appears webkit has an outstanding bug report on this very problem. Not sure about firefox. (https://bugs.webkit.org/show_bug.cgi?id=20181)

Also, as someone in the ticket mentions, the 2.1 spec addresses this:

"Shorthand properties take a list of subproperty values or the value 'inherit'. One cannot mix 'inherit' with other subproperty values as it would not be possible to specify the subproperty to which 'inherit' applied. The definitions of a number of shorthand properties did not enforce this rule: 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue', and 'outline'."

http://www.w3.org/TR/CSS21/changes.html#q142

Adam Wagner
  • 15,469
  • 7
  • 52
  • 66
  • Tried that. It doesn't work either. Also, if you dive into font-family you'll see that it has an inherit value listed there also. – Etan Reisner Apr 01 '11 at 20:40
  • Yes, font-family is either inherit or something custom and I'm trying to use inherit. The point of my question was whether I'm reading things incorrectly and/or some of the browsers are just being broken. – Etan Reisner Apr 01 '11 at 20:45
  • I'll say broken browsers... which is odd, since mozilla's own dev site shows the same as the specs: https://developer.mozilla.org/en/CSS/font – Adam Wagner Apr 01 '11 at 20:47
  • There is nothing wrong with the browsers, it's correct to reject the use of `inherit` as a font family in the font style. See my answer. – Guffa Apr 02 '11 at 10:42
5

According to the standards, you can't use inherit along with other options in the font composite style.

Both the font-size and font-family values have to be specified (if you don't use any of the forms where they are not used at all).

So, you can't use it to only set the weight, size, line-height, but inheriting the family.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • I'm assuming you are making the same claim Adam Wagner was, in which case I invite you to look at font-family as well. If not, please explain. – Etan Reisner Apr 01 '11 at 20:50
  • I see what you are trying to do, and why it should work. Not sure if the spec says something about using inherit values for the sub-sections for these shorthands. That being said, I can see how it would be easy for the browsers to get it wrong, since this topic is not explored in the spec. – Adam Wagner Apr 01 '11 at 20:54
  • 2
    @Etan Reisner: You can use `inherit` in the `font-family` style, but that doesn't mean that you can use it instead of a font family name in the `font` style. It couldn't be used that way in composite styles, as the value `inherit` can not give any indication about which of the style components should be inherited. – Guffa Apr 01 '11 at 20:59
1

My solution follows (to create as little CSS overhead as possible when using a large composite font-family declaration for your site):

.my-class {
  font: bold 1.167em/2 Helvetica;
  font-family: inherit;
}
  • Tested (and working) in FF where I was having the above issue.
Joe Johnson
  • 1,814
  • 16
  • 20
1

It's obvious that the keyword inherit causes trouble. Maybe because CSS is trying to make it work even if you didn't follow the prescribed order of options (seems not to be the case because different order doesn't work either) and it cannot decide to what directive does inherit belong to.

It works fine if you explicitly set the font family: font: bold 10px/13px serif;

Czechnology
  • 14,832
  • 10
  • 62
  • 88
0

No.

the font shorthand property is

font: 12px normal Arial;

Font shorthand is size, weight, font-style. Line height in font is a very very new addition in css and I wouldn't recommend using it just yet. Just add

line-height: 13px;

It is no real extra effort in including the line-height seperately, and until it is cross browser including the line-height in shorthand hand font I would not use it at all.

PHP
  • 216
  • 2
  • 9
  • The [specs](http://www.w3.org/TR/CSS2/fonts.html#font-shorthand) tell a different story about the syntax... – Czechnology Apr 01 '11 at 20:41
  • The CSS1 spec has exameples which include the / though the text itself doesn't appear to mention it. It is however in the text in REC-CSS2-20080411. Doesn't appear all that recent to me. I also don't think that's actually the problem with that line. – Etan Reisner Apr 01 '11 at 20:44
  • Etan is right, `line-height` has been around since CSS1. Furthermore, it and the shorthand syntax are supported by IE4+ and every single version of Firefox, Opera, Safari, Chrome, etc. – BoltClock Apr 01 '11 at 20:51
  • The `line-height` is not recent at all, it's there already in CSS 1. http://www.w3.org/TR/2008/REC-CSS1-20080411/#font It's only some system fonts and `inherit` that was added in CSS 2. – Guffa Apr 01 '11 at 20:55
  • I never knew that. Thanks for informing me. – PHP Apr 01 '11 at 20:55