<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">
		<div id="Description">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">font</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Inherited: Yes</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>This is a shorthand attribute that lets you set multiple font-related
attributes with one assignment statement. Some browsers are more
forgiving than others about required and optional values, but this
attribute should at least specify the
<span class="replaceable">font-size</span> and font face (either by
<span class="replaceable">font-family</span> or
<span class="replaceable">CSS2FontConstant</span> values) in that order.
The order of other space-delimied value types is not critical. In
CSS2, some additional short-circuit constants apply named system
fonts that have fixed values for each of the font-related attributes.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS Syntax</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>font: <span class="replaceable">font-style</span> || <span class="replaceable">font-variant</span> || <span class="replaceable">font-weight</span> || <span class="replaceable">font-size[/line-height]</span> ||
<span class="replaceable">font-family</span> | <span class="replaceable">CSS2FontConstant</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">Value</span></td>
				</tr>
				<tr>
					<td><p>For syntax and examples of value types for font and line attributes,
see the respective attribute listing. The construction with the
forward slash before the <span class="replaceable">line-height</span> value
allows the use of a second length value within the potentially long
sequence of values for this attribute: the
<span class="replaceable">line-height</span> length value must always
accompany the required <span class="replaceable">font-size</span> value,
separated by a forward slash.
</p><p>The CSS2 font constants are as follows: <span class="literal">caption</span> |
<span class="literal">icon</span> | <span class="literal">menu</span> |
<span class="literal">message-box</span> | <span class="literal">small-caption</span> |
<span class="literal">status-bar</span>. These constants refer to browser and
operating system fonts used by the client. Their precise appearance
is therefore different on different operating systems but consistent
with the user's expectation for a particular type of
font. In other words, these styles should be used when their function
mirrors a system or browser function.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">Initial Value</span></td>
				</tr>
				<tr>
					<td><p>None.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">Example</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>body {font: 12px serif}
h2 {font: bolder small-caps 16px "Lucida Console", Arial, sans-serif}
.iconCaption {font: 10px/1.1em caption}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">Applies To</span></td>
				</tr>
				<tr>
					<td><p>All elements.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">Object Model Reference</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.font</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>