Geek Answers Handbook

Is this font the shorthand property valid syntax? (My reading of the spec says yes, but half of my installed browsers disagree).

It's really? font: bold 10px/13px inherit;

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

It works 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 this.

I have not tried Chrome or Firefox 4 yet.

If this really needs to be evaluated, is this parsing error a known issue?

A few extra points:

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

Update

As Adam Wagner pointed out in his answer, my attempt to evaluate is actually invalid (despite my naive reading of the proposed specification) due to § C.3.1 of the CSS2.1 specification.

+7
source share
5 answers

I think the problem is with adding “inherit” to your value.

According to specifications:

[[<'font-style'> || <'font-variant'> || <'font-weight'>]? <'font-size'> [/ <'line-height'>]? <'font-family'>] | signature | 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:

Webkit seems to have an outstanding bug report on this very issue. Not sure about Firefox. ( https://bugs.webkit.org/show_bug.cgi?id=20181 )

Also, as someone mentions on a ticket, specification 2.1 addresses this:

"The shorthand properties take a list of subvariant values ​​or the value of inherit. You cannot mix 'inherit' with other subproperty values, since it would be impossible to specify a subtask to which 'inherit' applies. The number of shorthand properties did not apply 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

+8
source

By standards , you cannot use inheritance with other parameters in the composite font style.

You must specify the font size and font size (if you do not use any forms in which they are not used at all).

So you cannot use it to set the weight, size, line height, but inherit the family.

+3
source

Obviously, the inherit keyword is causing problems. Maybe it’s because CSS is trying to make it work even if you don’t follow the prescribed order of options (it seems not because the other order doesn’t work either) and it cannot decide which directive inherits.

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

+1
source

My solution should be (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 works) in FF, where I had a problem.
+1
source

Not.

font shorthand property

 font: 12px normal Arial;

Font abbreviation - size, weight, font style. Font line height is a very new addition in css, and I would not recommend using it. Just add

 line-height: 13px;

This is not an unnecessary effort in that it includes the linear height separately, and until it becomes a cross-browser, including the line height in the shortened font, I would not use it at all.

0
source

More articles:


All Articles