Little Web Hut

CSS 2.1 Reference: font Property

CSS font Property
Syntax
selector {font: style variant weight size /line-height family, family;}
  • style is OPTIONAL. It is specified by using one of the following keywords: normal, italic, or oblique.
  • variant is OPTIONAL. It is specified by using one of the following keywords: normal, or small-caps.
  • weight is OPTIONAL. It is specified by using one of the following keywords: normal, bold, bolder, lighter or one of the following weight-numbers: 100, 200, 300, 400, 500, 600, 700, 800, or 900.
  • size is specified by using a length, percentage, or one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large, larger, or smaller.
  • line-height is OPTIONAL and must be preceded by a forward slash "/" if it is used. It is specified by using a number, length, percentage, or the keyword normal.
  • family occurs one or more times. If it occurs more than once then the values must be separated by commas. It is specified by using a family-name or one of the following keywords: serif, sans-serif, cursive, fantasy, or monospace. Above is a sample of family occurring two times.
(OR)
selector {font: value;}
  • value is specified by using one of the following keywords: caption, icon, menu, message-box, small-caption, status-bar, or inherit.
Usage

The font property is used as a shorthand method to specify two or more of the following 6 properties all in one place.

The font-style, font-variant, font-weight, and line-height properties are optional. Any of these properties that are not specified will automatically be set to their initial value. The font-size and font-family properties are required.


CSS Example: The font properties are set by specifying all 6 values, only specifying size and a generic font family, and using the keyword caption to specify a system font.
  #tst1 {font: italic small-caps bold 20px/1.5 Helvetica, Arial, sans-serif;}
  #tst2 {font: large serif;}
  #tst3 {font: caption;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • style keywords:
    • normal - This is a sample of a normal font style.
    • italic - This is a sample of an italic font style.
    • oblique - This is a sample of an oblique font style.
  • variant keyword:
    • normal - This is a sample of a normal font variant.
    • small-caps - This is a sample of a small-caps font variant. Lowercase letters look like small uppercase letters.
  • weight keywords:
    • normal - This font weight is equivalent to the weight-number 400. See font-weight for a description of weight-numbers.
    • bold - This font weight is equivalent to the weight-number 700. See font-weight for a description of weight-numbers.
    • bolder - This font weight is equal to, or greater than, the font weight inherited from the parent element.
    • lighter - This font weight is equal to, or less than, the font weight inherited from the parent element.
  • size keywords:
    • xx-small - This is a font size sample.
    • x-small - This is a font size sample.
    • small - This is a font size sample.
    • medium - This is a font size sample.
    • large - This is a font size sample.
    • x-large - This is a font size sample.
    • xx-large - This is a font size sample.
    • larger - This font size is relative to the font size of the parent element.
    • smaller - This font size is relative to the font size of the parent element.
  • line-height keywords:
    • normal - Normal line height for the font that is being used.
  • family keywords:
    • serif - Generic family name.
    • sans-serif - Generic family name.
    • cursive - Generic family name.
    • fantasy - Generic family name.
    • monospace - Generic family name.
  • caption - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • icon - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • menu - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • message-box - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • small-caption - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • status-bar - This keyword is used to specify a system font. This single keyword will set the style, variant, weight, size, line-height, and family properties. When this keyword is used, no other property values are allowed.
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.
Applies To All elements
Inherited Yes
Initial Value


font Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe font properties are set by specifying all 6 values, only specifying size and a generic font family, and using the keyword caption to specify a system font.