Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is font-size necessary for font CSS shorthand?

Tags:

html

css

I want to use the font CSS shorthand to include all font properties (like font-style, font-weight, font-size, and so on).

It works if I use all properties.

p.ex1 {
    font: 15px arial, sans-serif;
}

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

But when I only have font-weight and font-family, it doesn't.

p.ex1 {
    font: 900 Georgia, serif;
 }
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

Why? Is it necessary to specify font-size when using the font CSS shorthand?

like image 549
Minal Chauhan Avatar asked Nov 11 '16 12:11

Minal Chauhan


1 Answers

Yes.

From: developer.mozilla.org/[...]/font

Note: There are a few caveats when using the CSS font shorthand.
If these conditions are not met, the property is invalid and is entirely ignored.

  • Except when using a keyword, it is mandatory to define the value of both the font-size and the font-family properties.
  • Not all values of font-variant are allowed.
  • Only the values defined in CSS 2.1 are allowed, that is normal and small-caps.
  • Though not directly settable by font, the values of font-stretch, font-size-adjust and font-kerning are also reset to their initial values.
  • The order of the values is not completely free: font-style, font-variant and font-weight must be defined, if any, before the font-size value.
    The line-height value must be defined immediately after the font-size, preceded by a mandatory /.
  • Finally the font-family is mandatory and must be the last value defined (inherit value does not work).
like image 87
Daniel Springer Avatar answered Sep 17 '22 16:09

Daniel Springer