font

  • Raccourci de la révision : CSS/font
  • Titre de la révision : font
  • ID de la révision : 166632
  • Créé :
  • Créateur : Mgjbot
  • Version actuelle ? Non
  • Commentaire robot Ajoute: [[en:CSS:font]] Retire: [[fr:CSS:font]]

Contenu de la révision

{{template.CSSRef()}} {{template.Traduction_en_cours("css:font")}}

Summary

The font property is a shorthand property for setting {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} and {{template.Cssxref("font-family")}} at the same place in the style sheet.

  • Initial value: refer to individual properties
  • Applies to: all elements
  • Inherited: yes
  • Media: Visual


Syntax

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

font: {{template.Cssxref("inherit")}}

Values

Using the {{template.Cssxref("font")}} shorthand property sets the longhand properties as specified, and sets all other font-related properties to their initial values.

See {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, and {{template.Cssxref("font-family")}} for legal values of each property.

System fonts can also be specified using the {{template.Cssxref("font")}} property, instead of specifying individual longhand properties:

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.
-moz-window 
-moz-document 
-moz-workspace 
-moz-desktop 
-moz-info 
-moz-dialog 
-moz-button 
-moz-pull-down-menu 
-moz-list 
-moz-field 

Examples

{{template.CSSRefExampleLink("font")}}

/* 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 }
/* 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 }
/* 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 }

Notes

The {{template.Cssxref("font-size")}} and {{template.Cssxref("font-family")}} parts of the shorthand are mandatory. Omitting them is a syntax error, and causes the entire declaration to be ignored.

Properties for which no values are given are set to their initial value, which is normal for all properties that can be omitted ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, and {{template.Cssxref("line-height")}}).

The {{template.Cssxref("font-size-adjust")}} property is also set to its initial value (none) when the {{template.Cssxref("font")}} shorthand property is specified.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 3
Netscape 4
Opera 3.5

See also

{{template.Cssxref("font-family")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("font-size-adjust")}}, {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("line-height")}}

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/font", "pl": "pl/CSS/font" } ) }}

Source de la révision

<p> 
{{template.CSSRef()}}
{{template.Traduction_en_cours("css:font")}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The font property is a shorthand property for setting {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} and {{template.Cssxref("font-family")}} at the same place in the style sheet.
</p>
<ul><li> Initial value: refer to individual properties 
</li><li> Applies to: all elements
</li><li> Inherited: yes
</li><li> Media: <a href="fr/CSS/Media/Visual">Visual</a>
</li></ul>
<p><br>
</p>
<h3 name="Syntax"> Syntax </h3>
<p><code>font:</code> [ &lt;<a href="fr/CSS/font-style">font-style</a>&gt; || &lt;<a href="fr/CSS/font-variant">font-variant</a>&gt; || &lt;<a href="fr/CSS/font-weight">font-weight</a>&gt; ]? &lt;<a href="fr/CSS/font-size">font-size</a>&gt; [ / &lt;<a href="fr/CSS/line-height">line-height</a>&gt; ]? &lt;<a href="fr/CSS/font-family">font-family</a>&gt;
</p><p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</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> | <code>-moz-field</code>
</p><p><code>font:</code> {{template.Cssxref("inherit")}}
</p>
<h3 name="Values"> Values </h3>
<p>Using the {{template.Cssxref("font")}} shorthand property sets the longhand properties as specified, and sets all other font-related properties to their initial values.
</p><p>See {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}},  and {{template.Cssxref("font-family")}} for legal values of each property.
</p><p>System fonts can also be specified using the {{template.Cssxref("font")}} property, <i>instead of</i> specifying individual longhand properties:
</p>
<dl><dt> caption </dt><dd> The font used for captioned controls (e.g., buttons, drop-downs, etc.).
</dd><dt> icon </dt><dd> The font used to label icons.
</dd><dt> menu </dt><dd> The font used in menus (e.g., dropdown menus and menu lists).
</dd><dt> message-box </dt><dd> The font used in dialog boxes.
</dd><dt> small-caption </dt><dd> The font used for labeling small controls.
</dd><dt> status-bar </dt><dd> The font used in window status bars.
</dd><dt> -moz-window </dt><dd>
</dd><dt> -moz-document </dt><dd>
</dd><dt> -moz-workspace </dt><dd>
</dd><dt> -moz-desktop </dt><dd>
</dd><dt> -moz-info </dt><dd>
</dd><dt> -moz-dialog </dt><dd>
</dd><dt> -moz-button </dt><dd>
</dd><dt> -moz-pull-down-menu </dt><dd>
</dd><dt> -moz-list </dt><dd>
</dd><dt> -moz-field </dt><dd>
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("font")}}
</p>
<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>
<h3 name="Notes"> Notes </h3>
<p>The {{template.Cssxref("font-size")}} and {{template.Cssxref("font-family")}} parts of the shorthand are mandatory.  Omitting them is a syntax error, and causes the entire declaration to be ignored.
</p><p>Properties for which no values are given are set to their initial value, which is <code>normal</code> for all properties that can be omitted ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, and {{template.Cssxref("line-height")}}).
</p><p>The {{template.Cssxref("font-size-adjust")}} property is also set to its initial value (<code>none</code>) when the {{template.Cssxref("font")}} shorthand property is specified.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (for {{template.Cssxref("font-size-adjust")}})
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (for new system font values)
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("font-family")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("font-size-adjust")}}, {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("line-height")}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/CSS/font", "pl": "pl/CSS/font" } ) }}
Revenir à cette révision