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?
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With