font

  • Raccourci de la révision : CSS/font
  • Titre de la révision : font
  • ID de la révision : 166635
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire /* Résumé */

Contenu de la révision

{{template.CSSRef()}}

Résumé

La propriété font est un raccourci pour la définition de {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} et {{template.Cssxref("font-family")}} dans une seule règle dans la feuille de style.

Syntaxe

font: [ <{{template.Cssxref("font-style")}}> || <{{template.Cssxref("font-variant")}}> || <{{template.Cssxref("font-weight")}}> ]? <{{template.Cssxref("font-size")}}> 
      [ / <{{template.Cssxref("line-height")}}> ]? <{{template.Cssxref("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")}}

Valeurs

L'utilisation de la propriété raccourcie {{template.Cssxref("font")}} définit les propriétés individuelles telles que spécifiées, et définit les autres à leurs valeurs initiales.

Voir {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, et {{template.Cssxref("font-family")}} pour connaître les valeurs autorisées de chaque propriété.

Les fontes du système peuvent également être spécifiées à l'aide de la propriété {{template.Cssxref("font")}}, à la place des définitions des propriétés individuelles :

caption 
La fonte utilisée pour les légendes des contrôles (par exemple: les boutons, les déroulements, etc).
icon 
La fonte utilisée pour les étiquettes des icônes.
menu 
La fonte utilisée dans les menus (par exemple: les menus déroulant et les listes de menu).
message-box 
La fonte utilisée pour les boîtes de dialogues.
small-caption 
La fonte utilisée pour les étiquettes des petits contrôles.
status-bar 
La fonte utilisée dans la barre d'état de la fenêtre.
-moz-window 
-moz-document 
-moz-workspace 
-moz-desktop 
-moz-info 
-moz-dialog 
-moz-button 
-moz-pull-down-menu 
-moz-list 
-moz-field 

Exemples

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

/* Définit la taille de la fonte à 12pt, la hauteur de ligne à 14pt et
   la famille de fonte à sans-sérif */
p { font: 12pt/14pt sans-serif }
/* Définit la taille de la fonte à 80% de celle de l'élément parent ou de la taille par défaut
   s'il n'y a pas de parent et définit la famille de fonte à sans-sérif */
p { font: 80% sans-serif }
/* Définit le poids de la fonte à gras, le style de fonte à italique, la taille de
   la fonte à grande, et la famille de fonte à sérif. */
p { font: bold italic large serif }

Notes

Les composantes {{template.Cssxref("font-size")}} et {{template.Cssxref("font-family")}} de la propriété raccourcie sont obligatoires. Oublier l'une d'elles est une erreur de syntaxe, et entraînera l'omission de la règle entière.

Les propriétés pour lesquelles aucune valeur n'est spécifiée sont définies à leur valeur initiale, qui est normal pour toutes les propriétés pouvant être omises : ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}} et {{template.Cssxref("line-height")}}).

La propriété {{template.Cssxref("font-size-adjust")}} est également définie à sa valeur initiale (none) lorsque la propriété raccourci {{template.Cssxref("font")}} est spécifiée.

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 3
Netscape 4
Opera 3.5

Voir également

{{wiki.template('CSS_Reference:Fonts')}}

Interwiki Languages Links

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

Source de la révision

<p> 
{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La propriété <code>font</code> est un raccourci pour la définition de {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} et {{template.Cssxref("font-family")}} dans une seule règle dans la feuille de style.
</p>
<ul><li> <a href="fr/CSS/Valeur_initiale">Valeur initiale</a> : voir chacune des propriété pour les détails
</li><li> S'applique à : tous les éléments
</li><li> <a href="fr/CSS/H%c3%a9ritage">Héritée</a> : oui
</li><li> Média : <a href="fr/CSS/M%c3%a9dia/Visuel">Visuel</a>
</li></ul>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">font: [ &lt;{{template.Cssxref("font-style")}}&gt; || &lt;{{template.Cssxref("font-variant")}}&gt; || &lt;{{template.Cssxref("font-weight")}}&gt; ]? &lt;{{template.Cssxref("font-size")}}&gt; 
      [ / &lt;{{template.Cssxref("line-height")}}&gt; ]? &lt;{{template.Cssxref("font-family")}}&gt;
</pre>
<pre class="eval">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
</pre>
<pre class="eval"><code>font:</code> {{template.Cssxref("inherit")}}
</pre>
<h3 name="Valeurs"> Valeurs </h3>
<p>L'utilisation de la propriété raccourcie {{template.Cssxref("font")}} définit les propriétés individuelles telles que spécifiées, et définit les autres à leurs valeurs initiales.
</p><p>Voir {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, et {{template.Cssxref("font-family")}} pour connaître les valeurs autorisées de chaque propriété.
</p><p>Les fontes du système peuvent également être spécifiées à l'aide de la propriété {{template.Cssxref("font")}}, <i>à la place</i> des définitions des propriétés individuelles :
</p>
<dl><dt> caption </dt><dd> La fonte utilisée pour les légendes des contrôles (par exemple: les boutons, les déroulements, etc).
</dd><dt> icon </dt><dd> La fonte utilisée pour les étiquettes des icônes.
</dd><dt> menu </dt><dd> La fonte utilisée dans les menus (par exemple: les menus déroulant et les listes de menu).
</dd><dt> message-box </dt><dd> La fonte utilisée pour les boîtes de dialogues.
</dd><dt> small-caption </dt><dd> La fonte utilisée pour les étiquettes des petits contrôles.
</dd><dt> status-bar </dt><dd> La fonte utilisée dans la barre d'état de la fenêtre.
</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="Exemples"> Exemples </h3>
<p>{{template.CSSRefExampleLink("font")}}
</p>
<pre class="eval">/* Définit la taille de la fonte à 12pt, la hauteur de ligne à 14pt et
   la famille de fonte à sans-sérif */
p { font: 12pt/14pt sans-serif }
</pre>
<pre class="eval">/* Définit la taille de la fonte à 80% de celle de l'élément parent ou de la taille par défaut
   s'il n'y a pas de parent et définit la famille de fonte à sans-sérif */
p { font: 80% sans-serif }
</pre>
<pre class="eval">/* Définit le poids de la fonte à gras, le style de fonte à italique, la taille de
   la fonte à grande, et la famille de fonte à sérif. */
p { font: bold italic large serif }
</pre>
<h3 name="Notes"> Notes </h3>
<p>Les composantes {{template.Cssxref("font-size")}} et {{template.Cssxref("font-family")}} de la propriété raccourcie sont obligatoires. Oublier l'une d'elles est une erreur de syntaxe, et entraînera l'omission de la règle entière.
</p><p>Les propriétés pour lesquelles aucune valeur n'est spécifiée sont définies à leur valeur initiale, qui est <code>normal</code> pour toutes les propriétés pouvant être omises : ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}} et {{template.Cssxref("line-height")}}).
</p><p>La propriété {{template.Cssxref("font-size-adjust")}} est également définie à sa valeur initiale (<code>none</code>) lorsque la propriété raccourci {{template.Cssxref("font")}} est spécifiée.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#font">CSS 1 (fr)</a>
</li><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font">CSS 2 (fr)</a> (pour {{template.Cssxref("font-size-adjust")}})
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1 (en)</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui (en)</a> (pour le nouveau système de valeurs de fontes)
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navigateur</th>
    <th>Version minimale</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="Voir_.C3.A9galement"> Voir également </h3>
<p>{{wiki.template('CSS_Reference:Fonts')}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/font", "pl": "pl/CSS/font" } ) }}
Revenir à cette révision