Font property is a so called shorthand property that is used to set font-style, font-variant, font-weight, font-size, line-height and font-family properties at the same place.

Before applying the font property all font-related properties are first reset to their default values.

Font property

The font property contains following information:

  1. value: [[ <'font-style'>, <'font-variant'>, <'font-weight'>]? <'font-size'> [/<'line-height'>]? <'font-family'>],| caption,| icon,| menu,| message-box,| small-caption, status-bar or inherit;
  2. initial: depends on individual properties;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: depends on individual properties;
  6. media: visual;
  7. computed value: depends on individual properties.

Other then mentioned properties, there are other values (properties) that may be assigned to the shorthand font property. These values refer to system fonts and they are:

  • Caption; font used for caption controls (i.e. buttons, drop-down lists?);
  • Icon; font used for label icons;
  • Menu; font used in menus (form menus?);
  • Message-box; font used in dialog boxes;
  • Small-caption; font used for labeling small controls;
  • Status-bar; font used in window status bars.

These system fonts may only be used as a whole, meaning that other properties such as weight, family, size, etc are set all at the time but may be altered individually if desired.


CSS font property example:


›› go to examples ››