font

Description

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.

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

Syntax and Property Values


font: font-style //w  w  w.  j  a v a  2s .com
      font-variant 
      font-weight 
      font-size
      font-family;

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

Example


<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!--  ww w . j  a  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

The code above generates the following result.

font




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference