CSS Property font








font shorthand property sets two or more aspects of an element's font. font can match the user's environment by using keywords such as icon.

Summary

ItemValue
Inherited Yes.
Version CSS1
JavaScript syntax object.style.font="italic small-caps bold 22px arial,sans-serif"
Applies to All elements.




CSS Syntax

font: font-style 
      font-variant 
      font-weight 
      font-size
      font-family;

Property Values

The property values are listed in the following table.

Property/Value Description
font-style Set the font style. See font-style for possible values
font-variant Set the font variant. See font-variant for possible values
font-weight Set the font weight. See font-weight for possible values
font-size/line-height Set the font size and the line-height. See font-size and line-height for possible values
font-family Set the font family. See font-family for possible values
caption Uses the font used by captioned controls (like buttons, drop-downs, etc.)
icon Uses the font that are used by icon labels
menu Uses the fonts that are used by dropdown menus
message-box Uses the fonts used by dialog boxes
small-caption A smaller version of the caption font
status-bar Uses the fonts used by the status bar
inherit Inherit the font property from the parent element




Browser compatibility

font Yes Yes Yes Yes Yes

Example

An example showing how to use font CSS property.

<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!--from w w  w . ja  v a2 s .  c  o  m-->
    font: 16px Verdana, Arial, Helvetica, sans-serif;
    margin: 20px;
}
h1 {
    font: bold 28px Verdana, Arial, Helvetica, sans-serif;
}
h2 {
    font: bold 24px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
    <h1>color my world</h1>
    <h2>gender and color</h2>
    <p>following:</p>
    <ul>
        <li>B</li>
        <li>M</li>
        <li>W</li>
    </ul>
    <p>this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    </p>
</body>
</html>

Click to view the demo