Font

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}
 */

 

Mandatory Values

Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored.

Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.

Optional Values

All five of the other values are optional. If you include any of font-style, font-variant, and font-weight, they must come before font-size in the declaration. If they aren’t, they will be ignored and may also cause the mandatory values to be ignored.

There are seven font sub-properties, including:

  • font-stretch: this property sets the font width, such as condensed or expanded.
    • normal
    • ultra-condensed
    • extra-condensed
    • condensed
    • semi-condensed
    • semi-expanded
    • expanded
    • extra-expanded
    • ultra-expanded
  • font-style: makes the text appear italicised or oblique.
    • normal
    • italic
    • oblique
    • inherit
  • font-variant: changes target text to small caps.
    • normal
    • small-caps
    • inherit
  • font-weight: sets the weight or the thickness of the font.
    • normal
    • bold
    • bolder
    • lighter
    • 100, 200, 300, 400, 500, 600, 700, 800, 900
    • inherit
  • font-size: sets the height of the font.
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    • smaller, larger
    • percentage
    • inherit
  • line-height: defines the amount of space above and below inline elements.
    • normal
    • number (font-size multiplier)
    • percentage
  • font-family: definies the font that is applied to the element.
    • sans-serif
    • serif
    • monospace
    • cursive
    • fantasy
    • caption
    • icon
    • menu
    • message-box
    • small-caption
    • status-bar
    • "string"

Using font-stretch

The font-stretch property is new in CSS3 so if it is used in an older browser that doesn’t support font-stretch in font shorthand, it will cause the entire line to be ignored.

The spec recommends including a fallback without font-stretch.


Helpful Links

SOURCE: CSS Tricks
MORE INFO: w3.org – Official FONT Property Info

 

Advertisements

#css, #web-design