---
title: font
slug: Web/CSS/font
tags:
  - CSS
  - Polices CSS
  - Propriété
  - Reference
translation_of: Web/CSS/font
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>font</code></strong> est :</p>

<ul>
 <li>une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}</li>
 <li>ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.</li>
</ul>

<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css">/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* Mots-clés indiquant la police à utiliser */
/* pour les boîtes de dialogue système      */
font: message-box;
font: icon;

/* Valeurs globales */
font: inherit;
font: initial;
font: unset;
</pre>

<p>La propriété <code>font</code> peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.</p>

<p>Si <code>font</code> est définie grâce à un mot-clé, ce mot-clé doit être : <a href="#keyword"><code>caption</code>, <code>icon</code>, <code>menu</code>, <code>message-box</code>, <code>small-caption</code> ou <code>status-bar</code></a>.</p>

<p>Si <code>font</code> est définie comme une propriété raccourcie :</p>

<ul>
 <li>La déclaration devra inclure des valeurs pour :
  <ul>
   <li>{{cssxref("&lt;font-size&gt;")}}</li>
   <li>{{cssxref("&lt;font-family&gt;")}}</li>
  </ul>
 </li>
 <li>La déclaration pourra éventuellement inclure des valeurs pour :
  <ul>
   <li>{{cssxref("&lt;font-style&gt;")}}</li>
   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
   <li>{{cssxref("&lt;line-height&gt;")}}</li>
  </ul>
 </li>
 <li>Les valeurs pour <code>font-style</code>, <code>font-variant</code> et <code>font-weight</code> doivent précéder la valeur pour <code>font-size</code></li>
 <li>La valeur de <code>font-variant</code> ne peut utiliser que les valeurs définies en CSS 2.1 : <code>normal</code> et <code>small-caps</code></li>
 <li>La valeur de <code>font-stretch</code> ne peut être qu'un mot-clé.</li>
 <li>La valeur pour <code>line-height</code> doit immédiatement suivre la valeur pour <code>font-size</code>, séparée par une barre oblique (par exemple "<code>16px/3</code>")</li>
 <li>La valeur pour <code>font-family</code> doit être la dernière fournie.</li>
</ul>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;'font-style'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-style")}}.</dd>
 <dt><code>&lt;'font-variant'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-variant")}}.</dd>
 <dt><code>&lt;'font-weight'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-weight")}}.</dd>
 <dt><code>&lt;'font-stretch'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-stretch")}}.</dd>
 <dt><code>&lt;'font-size'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-size")}}.</dd>
 <dt><code>&lt;'line-height'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("line-height")}}.</dd>
 <dt><code>&lt;'font-family'&gt;</code></dt>
 <dd>Voir la propriété {{cssxref("font-family")}}.</dd>
 <dt><a id="keyword">Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></a></dt>
 <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique :
 <table class="standard-table">
  <tbody>
   <tr>
    <td><code>caption</code></td>
    <td>La police système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).</td>
   </tr>
   <tr>
    <td><code>icon</code></td>
    <td>La police système utilisée pour les textes accompagnant les icônes.</td>
   </tr>
   <tr>
    <td><code>menu</code></td>
    <td>La police système utilisée pour les menus.</td>
   </tr>
   <tr>
    <td><code>message-box</code></td>
    <td>La police système utilisée dans les boîtes de dialogue.</td>
   </tr>
   <tr>
    <td><code>small-caption</code></td>
    <td>La police système utilisée pour les libellés des contrôles de petite taille.</td>
   </tr>
   <tr>
    <td><code>status-bar</code></td>
    <td>La police système utilisée dans les barres de statut de la fenêtre.</td>
   </tr>
  </tbody>
 </table>
 La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente <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>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">/* La corps de la police sera  12px */
/* La hauteur de ligne 14px et la   */
/* famille de polices sans-serif    */

.exemple1 {
  font: 12px/14px sans-serif;
}

/* La taille de la police mesurera   */
/* 80% de celle de l'élément parent  */
/* ou la valeur par défaut et la     */
/* famille de police sera sans-serif */

.exemple2 {
  font: 80% sans-serif;
}

/* La graisse est activée, le style    */
/* est italique, la taille est grande  */
/* et la famille est serif.            */

.gras_italique_serif {
  font: bold italic large serif;
}

/* On utilise la même police que pour */
/* la barre de statut de la fenêtre.  */
.statut {
  font: status-bar;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p class="exemple1"&gt;
  « Toujours aussi mouillée, » dit Alice tristement.
  « Je ne sèche que d’ennui. »
&lt;/p&gt;

&lt;p class="exemple2"&gt;
  « Dans ce cas, » dit le Dodo avec emphase, se
  dressant sur ses pattes, « je propose l’ajournement,
  et l’adoption immédiate de mesures énergiques. »
&lt;/p&gt;

&lt;p class="gras_italique_serif"&gt;
  « Parlez français, » dit l’Aiglon ; « je ne
  comprends pas la moitié de ces grands mots, et, qui
  plus est, je ne crois pas que vous les compreniez
  vous-même. » L’Aiglon baissa la tête pour cacher
  un sourire, et quelques-uns des autres oiseaux
  ricanèrent tout haut.
&lt;/p&gt;

&lt;p class="statut"&gt;
  « J’allais proposer, » dit le Dodo d’un ton vexé,
  « une course cocasse ; c’est ce que nous pouvons
  faire de mieux pour nous sécher. »
&lt;/p&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","300","500")}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Prise en charge des valeurs de <code>font-stretch</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Prise en charge des mots-clés.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font', 'font')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.properties.font")}}</p>