CSS - font


Description:

The font property is a shorthand property used to affect the rendering of text.

Possible Values:

Possible values will depend on how we are using this property.

  • <font-style>: Any permitted value for the property font-style.
  • <font-variant>: Any permitted value for the property font-variant.
  • <font-weight>: Any permitted value for the property font-weight.
  • <font-size>: Any permitted value for the property font-size.
  • <font-family>: Any permitted value for the property font-family.
  • <line-height>: Any permitted value for the property line-height.
  • caption: The font used by the operating system for captioned controls (e.g., buttons and drop-down menus). This is one of the "system font" values.
  • icon: The font used by the operating system to label icons. This is one of the "system font" values.
  • menu: The font used by the operating system in menus (e.g., drop-down menus and menu lists). This is one of the "system font" values.
  • message-box: The font used by the operating system within dialog boxes (e.g., warning dialogs). This is one of the "system font" values.
  • small-caption: The font used by the operating system to label small controls. This is one of the "system font" values.
  • status-bar: The font used by the operating system in window status bars. This is one of the "system font" values.

Applies to:

All the HTML elements

DOM Syntax:

object.style.font="bold italic small-caps 250%/1.2 sans-serif";

Example:

Here is the example using shorthand font property:

<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
     

This will produce following result:

Applying all the properties on the text at once.

 

 





Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508