1
edit
Changes
no edit summary
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== Summary ==
The font property is a shorthand property for setting [[CSS_GUIDE_FONT_STYLE|font-style]], [[CSS_GUIDE_FONT_VARIANT|font-variant]], [[CSS_GUIDE_FONT_WEIGHT|font-weight]], [[CSS_GUIDE_FONT_SIZE|font-size]], [[CSS_GUIDE_LINE_HEIGHT|line-height]] and [[CSS_GUIDE_FONT_FAMILY|font-family]] at the same place in the style sheet.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The font property can be used for all CSS elements.<td>
</tr>
<tr>
<td><b>[http://www.w3.org/TR/CSS21/media.html#visual-media-groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>Yes</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{font: [font-style] [font-variant] [font-weight] [font-size] [font-family]}
</pre>
== Legal Values ==
Since the font tag is a shorthand for defining multiple other font related properties in one place, the legal values of the font tag are the same as the legal values as the css properties that the font tag encapsulates. Therefore, see [[CSS_GUIDE_FONT_STYLE|font-style]], [[CSS_GUIDE_FONT_VARIANT|font-variant]], [[CSS_GUIDE_FONT_WEIGHT|font-weight]], [[CSS_GUIDE_FONT_SIZE|font-size]], [[CSS_GUIDE_LINE_HEIGHT|line-height]] and [[CSS_GUIDE_FONT_FAMILY|font-family]] for legal values of each property.
== Mozilla Recommended Values ==
== Usage Examples==
<pre>/* Set the font size to 12pt and the line height to 14pt. Set the font family to sans-serif */
p { font: 12pt/14pt sans-serif }</pre>
<pre>/* Set the font size to 80% of the parent tag or default value (if no parent tag present)
and set the font family to sans-serif */
p { font: 80% sans-serif }</pre>
<pre>/* Set the font weight to bold, the font-style to italic, the font size to large,
and the font family to serif. */
p { font: bold italic large serif }</pre>
== Notes ==
Properties for which no values are given are set to their initial value. See table below for initial values of the various font properties
<table border="1" cellpadding="0" cellspacing="1">
<tr><th>Font Property</th><th>Initial Value</th></tr>
<tr><td>[[CSS_GUIDE_FONT_STYLE|font-style]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_VARIANT|font-variant]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_WEIGHT|font-weight]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_SIZE|font-size]]</td><td>medium</td></tr>
<tr><td>[[CSS_GUIDE_LINE_HEIGHT|line-height]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_FAMILY|font-family]]</td><td>User Agent specific</td></tr>
</table>
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].
== Specification Conformance ==
* [http://www.w3.org/TR/CSS1#font CSS 1 ]
* [http://www.w3.org/TR/CSS21/fonts.html#propdef-font CSS 2]
* CSS 3
== Browser Compatibility ==
== See Also ==
== Summary ==
The font property is a shorthand property for setting [[CSS_GUIDE_FONT_STYLE|font-style]], [[CSS_GUIDE_FONT_VARIANT|font-variant]], [[CSS_GUIDE_FONT_WEIGHT|font-weight]], [[CSS_GUIDE_FONT_SIZE|font-size]], [[CSS_GUIDE_LINE_HEIGHT|line-height]] and [[CSS_GUIDE_FONT_FAMILY|font-family]] at the same place in the style sheet.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The font property can be used for all CSS elements.<td>
</tr>
<tr>
<td><b>[http://www.w3.org/TR/CSS21/media.html#visual-media-groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>Yes</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{font: [font-style] [font-variant] [font-weight] [font-size] [font-family]}
</pre>
== Legal Values ==
Since the font tag is a shorthand for defining multiple other font related properties in one place, the legal values of the font tag are the same as the legal values as the css properties that the font tag encapsulates. Therefore, see [[CSS_GUIDE_FONT_STYLE|font-style]], [[CSS_GUIDE_FONT_VARIANT|font-variant]], [[CSS_GUIDE_FONT_WEIGHT|font-weight]], [[CSS_GUIDE_FONT_SIZE|font-size]], [[CSS_GUIDE_LINE_HEIGHT|line-height]] and [[CSS_GUIDE_FONT_FAMILY|font-family]] for legal values of each property.
== Mozilla Recommended Values ==
== Usage Examples==
<pre>/* Set the font size to 12pt and the line height to 14pt. Set the font family to sans-serif */
p { font: 12pt/14pt sans-serif }</pre>
<pre>/* Set the font size to 80% of the parent tag or default value (if no parent tag present)
and set the font family to sans-serif */
p { font: 80% sans-serif }</pre>
<pre>/* Set the font weight to bold, the font-style to italic, the font size to large,
and the font family to serif. */
p { font: bold italic large serif }</pre>
== Notes ==
Properties for which no values are given are set to their initial value. See table below for initial values of the various font properties
<table border="1" cellpadding="0" cellspacing="1">
<tr><th>Font Property</th><th>Initial Value</th></tr>
<tr><td>[[CSS_GUIDE_FONT_STYLE|font-style]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_VARIANT|font-variant]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_WEIGHT|font-weight]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_SIZE|font-size]]</td><td>medium</td></tr>
<tr><td>[[CSS_GUIDE_LINE_HEIGHT|line-height]]</td><td>normal</td></tr>
<tr><td>[[CSS_GUIDE_FONT_FAMILY|font-family]]</td><td>User Agent specific</td></tr>
</table>
The [http://www.w3.org World Wide Web Consortium (W3C)] provides a free online [http://jigsaw.w3.org/css-validator/ CSS validation service].
== Specification Conformance ==
* [http://www.w3.org/TR/CSS1#font CSS 1 ]
* [http://www.w3.org/TR/CSS21/fonts.html#propdef-font CSS 2]
* CSS 3
== Browser Compatibility ==
== See Also ==
