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 −

<html>
   <head>
   </head>

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

This will produce following result −

Advertisements