font

  • Revision slug: CSS/font
  • Revision title: font
  • Revision id: 20415
  • Created:
  • Creator: vlgalik
  • Is current revision? No
  • Comment This WYSIWYG is pure evil :(; one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The font CSS property is either a shorthand property for setting {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}, or a way to set the element's font to a system font, using specific keywords.

As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.

Note: There are few caveats when using the CSS font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.
  • Except when using a keyword, it is mandatory to define the value of both the {{ cssxref("font-size") }} and the {{ cssxref("font-style") }} properties.
  • Not all values of {{ cssxref("font-variant") }} are allowed. Only the values defined in CSS 2.1 are allowed, that is normal and small-caps.
  • Though not directly settable by font, the values of {{ cssxref("font-stretch") }}, {{ cssxref("font-size-adjust") }} and {{ cssxref("font-kerning") }} are also reset to their initial values.
  • The order of the values is not completely free: {{ cssxref("font-style") }}, {{ cssxref("font-variant") }} and {{ cssxref("font-weight") }} must be defined, if any, before the {{ cssxref("font-size") }} value. The {{ cssxref("line-height") }} value must be defined immediately after the {{ cssxref("font-size") }}, preceded by a mandatory /. Finally the {{ cssxref("font-family") }} is mandatory and must be the last value defined ({{ cssxref("inherit") }} value does not work).
<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: see individual properties
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: see individual properties
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

font: {{ cssxref("font-style") }}|| {{ cssxref("font-variant") }}|| {{ cssxref("font-weight") }}]? {{ cssxref("font-size") }}[ / {{ cssxref("line-height") }}]? {{ cssxref("font-family") }}
font: system_font

Values

font-style
See the {{ Cssxref("font-style") }} CSS property. 
font-variant
See the {{ Cssxref("font-variant") }} CSS property.
font-weight
See the {{ Cssxref("font-weight") }} CSS property.
font-size
See the {{ Cssxref("font-size") }} CSS property.
line-height
See the {{ cssxref("line-height") }} CSS property.
font-family
See the {{ Cssxref("font-family") }} CSS property.
system_font
Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:
caption The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon The font used to label icons.
menu The font used in menus (e.g., dropdown menus and menu lists).
message-box The font used in dialog boxes.
small-caption The font used for labeling small controls.
status-bar The font used in window status bars.
Browsers implementing these often implements several more, prefixed, values; Gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.

Examples

{{ CSSRefExampleLink("font") }}

/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element or default value (if no parent element present) 
and set the font family to sans-serif */ 
p { font: 80% sans-serif }
/* 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 }
/* Use the same font as the status bar of the window */
p { font: status-bar }

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Shorthand 1.0 1.0 (1.0) 3.0-4.0 3.5 1.0 (85)
System fonts 1.0 1.0 (1.0) 4.0-5.5 6.0 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • The font-related CSS properties: {{ CSS_Reference:Fonts() }}

{{ languages( { "de": "de/CSS/font", "es": "es/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font", "pl": "pl/CSS/font" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>font</code> CSS property is either a shorthand property for setting {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}, or a way to set the element's font to a system font, using specific keywords.</p>
<p>As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.</p>
<div class="note"><strong>Note</strong>: There are few caveats when using the CSS <code>font</code> shorthand. If these conditions are not met, the property is invalid and is entirely ignored.<br> <ul> <li>Except when using a keyword, it is mandatory to define the value of both the {{ cssxref("font-size") }} and the {{ cssxref("font-style") }} properties.</li> <li>Not all values of {{ cssxref("font-variant") }} are allowed. Only the values defined in CSS 2.1 are allowed, that is <code>normal</code> and <code>small-caps</code>.</li> <li>Though not directly settable by <code>font</code>, the values of {{ cssxref("font-stretch") }}, {{ cssxref("font-size-adjust") }} and {{ cssxref("font-kerning") }} are also reset to their initial values.</li> <li>The order of the values is not completely free: {{ cssxref("font-style") }}, {{ cssxref("font-variant") }} and {{ cssxref("font-weight") }} must be defined, if any, before the {{ cssxref("font-size") }} value. The {{ cssxref("line-height") }} value must be defined immediately after the {{ cssxref("font-size") }}, preceded by a mandatory <code>/</code>. Finally the {{ cssxref("font-family") }} is mandatory and must be the last value defined ({{ cssxref("inherit") }} value does not work).</li> </ul>
</div>
<nobr>
&lt;style type="text/css"&gt;<!--[CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}


]]-->&lt;/style&gt;
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> see individual properties</li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li> <li><dfn>Percentages:</dfn> see individual properties</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> see individual properties</li>
</ul>
</nobr>
<p><nobr></nobr></p><nobr>
<h2>Syntax</h2>
<pre class="eval">font: {{ cssxref("font-style") }}|| {{ cssxref("font-variant") }}|| {{ cssxref("font-weight") }}]? {{ cssxref("font-size") }}[ / {{ cssxref("line-height") }}]? {{ cssxref("font-family") }}
font: <em>system_font</em>
</pre>
<h3>Values</h3>
<dl> <dt><em>font-style</em></dt> <dd>See the {{ Cssxref("font-style") }} CSS property. </dd> <dt><em>font-variant</em></dt> <dd>See the {{ Cssxref("font-variant") }} CSS property.</dd> <dt><em>font-weight</em></dt> <dd>See the {{ Cssxref("font-weight") }} CSS property.</dd> <dt><em>font-size</em></dt> <dd>See the {{ Cssxref("font-size") }} CSS property.</dd> <dt><em>line-height</em></dt> <dd>See the {{ cssxref("line-height") }} CSS property.</dd> <dt><em>font-family</em></dt> <dd>See the {{ Cssxref("font-family") }} CSS property.</dd> <dt>system_font</dt> <dd>Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font: <table class="standard-table"> <tbody> <tr> <td><code>caption</code></td> <td>The font used for captioned controls (e.g., buttons, drop-downs, etc.).</td> </tr> <tr> <td><code>icon</code></td> <td>The font used to label icons.</td> </tr> <tr> <td><code>menu</code></td> <td>The font used in menus (e.g., dropdown menus and menu lists).</td> </tr> <tr> <td><code>message-box</code></td> <td>The font used in dialog boxes.</td> </tr> <tr> <td><code>small-caption</code></td> <td>The font used for labeling small controls.</td> </tr> <tr> <td><code>status-bar</code></td> <td>The font used in window status bars.</td> </tr> </tbody> </table> Browsers implementing these often implements several more, prefixed, values; Gecko implements <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>.</dd>
</dl>
<h2>Examples</h2>
<p>{{ CSSRefExampleLink("font") }}</p>
<pre>/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
</pre>
<pre>/* Set the font size to 80% of the parent element or default value (if no parent element 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>
<pre>/* Use the same font as the status bar of the window */
p { font: status-bar }
</pre>
<h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand" title="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">CSS 2.1 Fonts #font</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-ui/#system0" title="http://www.w3.org/TR/css3-ui/#system0">CSS 3 User interface #system-fonts</a> Candidate recommendation, not yet implemented</li>
</ul>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Shorthand</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>3.0-4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td>System fonts</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0-5.5</td> <td>6.0</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li>The font-related CSS properties: {{ CSS_Reference:Fonts() }}</li>
</ul>
<p>{{ languages( { "de": "de/CSS/font", "es": "es/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font", "pl": "pl/CSS/font" } ) }}</p></nobr>
Revert to this revision