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
| Item | Value |
|---|---|
| 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>