Minal Chauhan Minal Chauhan - 26 days ago 7
CSS Question

It is necessary to add font-size in font css?

I want to use

font
css for includes all font properties ( like font-style, font-weight, font-size etc..)

It's work fine when I used 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 I want to just add font-weight and font-family in
font
css, so it's not working properly.



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 this happens? So It is necessary to add font-size into font css?

Thank you for your time.

Answer

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).