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.
| Item | Value |
|---|---|
| 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>
The code above generates the following result.
