La propriété font est :

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 ».

Note : Afin que la propriété raccourcie soit correcte, il est nécessaire que certaines conditions soient respectées. Si ce n'est pas le cas, la déclaration est invalide et est alors complètement ignorée. Voici les différentes règles :
  • Sauf quand la propriété est utilisée avec un mot-clé, il est nécessaire de définir une valeur pour font-size et pour font-family.
  • Pour font-variant, seules certaines valeurs, définies avec CSS 2.1 sont autorisées : normal et small-caps.
  • Les propriétés font-stretch, font-size-adjust et font-kerning sont réinitialisées par font bien qu'elles ne puissent pas être définies avec la propriété raccourcie.
  • L'ordre des différentes valeurs n'est pas complètement libre : font-style, font-variant et font-weight doivent être définies avant la valeur de font-size si cette dernière est utilisée. La valeur de line-height doit être définie immédiatement après font-size et doit obligatoirement être précédée d'une barre oblique. Enfin, la valeur de font-family est obligatoire et doit être la dernière valeur définie  (inherit ne fonctionne pas).

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
  • font-size: se rapporte à la taille de la police de l'élément parent
  • line-height: se rapporte à la taille de la police de l'élément lui-même
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • font-style: comme spécifié
  • font-variant: comme spécifié
  • font-weight: le mot-clé ou la valeur numérique, comme spécifié, transformé en la valeur réelle avec bolder et lighter
  • font-stretch: comme spécifié
  • font-size: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
  • line-height: pour les valeurs en pourcentages ou en longueur, la longueur absolue, sinon, comme spécifié
  • font-family: comme spécifié
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

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

Valeurs

<'font-style'>
Voir la propriété font-style.
<'font-variant'>
Voir la propriété font-variant.
<'font-weight'>
Voir la propriété font-weight.
<'font-stretch'>
Voir la propriété font-stretch.
<'font-size'>
Voir la propriété font-size.
<'line-height'>
Voir la propriété line-height.
<'font-family'>
Voir la propriété font-family.
caption icon menu message-box small-caption status-bar
Un mot-clé peut être utilisé pour indiquer une police système spécifique :
caption La police utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).
icon La police utilisée pour les textes accompagnant les icônes.
menu La police utilisée pour les menus.
message-box La police utilisée dans les boîtes de dialogue.
small-caption La police utilisée pour les libellés des contrôles de petite taille.
status-bar La police utilisée dans les barres de statut de la fenêtre.
La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list and -moz-field.

Syntaxe formelle

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar


<font-variant-css21> = [ normal | small-caps ]

Exemples

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;
}

HTML

<p class="exemple1">
  « Toujours aussi mouillée, » dit Alice tristement.
  « Je ne sèche que d’ennui. »
</p>

<p class="exemple2">
  « 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. »
</p>

<p class="gras_italique_serif">
  « 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.
</p>

<p class="statut">
  « 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. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 3
La définition de 'font' dans cette spécification.
Candidat au statut de recommandation Prise en charge des valeurs de font-stretch.
CSS Level 2 (Revision 1)
La définition de 'font-weight' dans cette spécification.
Recommendation Prise en charge des mots-clés.
CSS Level 1
La définition de 'font' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Propriété raccourcie 1.0 1.0 (1.0) (Oui) 3.0 3.5 1.0 (85)
Polices système 1.0 1.0 (1.0) ? 4.0 6.0 1.0 (85)
Valeurs pour font-stretch (Oui) 43 (43) ? ? ? ?
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple ? ? (Oui) ? ? ?
Valeurs pour font-stretch ? 43 (43) ? ? ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Mgjbot, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,