Font

Shorthand to set font properties:

      element { font: [Font-style] [Font-variant] [Font-weight] Font-size [Line-height] Font-family ;}

This shorthand is equivalent to the following:

element { 
  font-style: normal | italic | oblique;
  font-variant: normal | small-caps;
  font-weight: normal | bold | bolder | lighter | (100-900);
  font-size: (number+unit) | (xx-small - xx-large);
  line-height: normal | (number+unit);
  font-family: fontname1,"font name2";
}

Alternatively you can choose to inherit from a parent element: font: inherit ;

The default font property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  font-style:  normal;
  font-variant: normal;
  font-weight: normal;
  font-size:   inherit;
  line-height: normal;
  font-family: inherit;

Examples

Set the font of H1 to double size (200%) with the Verdana font family:

h1 {font: 200% Verdana,serif ;}

Try it:

“From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader.” ~ Adrian Frutiger

(CSS 1) Browser Support: All major browsers

“The real test of friendship is: can you literally do nothing with the other person? Can you enjoy those moments of life that are utterly simple?” - Eugene Kennedy

Related:

color - Color of text
font-family - Font family for text
font-size - Font size of text
font-style - Font style for text
font-weight - Normal, bold, bolder
@font-face Download and use a web font.


© Copyright SS64.com 1999-2014
Some rights reserved