font

Exemple interactif

font:
  1.2rem "Fira Sans",
  sans-serif;

font:
  italic 1.2rem "Fira Sans",
  serif;

font: italic small-caps bold 16px/2 cursive;

font: small-caps bold 24px/1 sans-serif;

font: caption;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Italic"),
    url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

section {
  margin-top: 10px;
  font-size: 1.1em;
}

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 font, les propriétés détaillées, font-size-adjust, et font-kerning sont également réinitialisées avec leurs valeurs initiales.

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;

La propriété font 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.

Si font est définie grâce à un mot-clé, ce mot-clé doit être : caption, icon, menu, message-box, small-caption ou status-bar.

Si font est définie comme une propriété raccourcie :

• La déclaration devra inclure des valeurs pour :

  • <font-size>
  • <font-family>

• La déclaration pourra éventuellement inclure des valeurs pour :

  • <font-style>
  • <font-variant>
  • <font-weight>
  • <font-stretch>
  • <line-height>

• Les valeurs pour font-style, font-variant et font-weight doivent précéder la valeur pour font-size

• La valeur de font-variant ne peut utiliser que les valeurs définies en CSS 2.1 : normal et small-caps

• La valeur de font-stretch ne peut être qu'un mot-clé.

• La valeur pour line-height doit immédiatement suivre la valeur pour font-size, séparée par une barre oblique (par exemple "16px/3")

• La valeur pour font-family doit être la dernière fournie.

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.

Polices système : 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 système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).
icon	La police système utilisée pour les textes accompagnant les icônes.
menu	La police système utilisée pour les menus.
message-box	La police système utilisée dans les boîtes de dialogue.
small-caption	La police système utilisée pour les libellés des contrôles de petite taille.
status-bar	La police système 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.

Définition formelle

Syntaxe formelle

font = 
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ]  |
  <system-family-name>                                

<font-style> = 
  normal                           |
  italic                           |
  left                             |
  right                            |
  oblique <angle [-90deg,90deg]>?  

<font-variant-css2> = 
  normal      |
  small-caps  

<font-weight> = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-width-css3> = 
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded   

<font-size> = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<line-height> = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<font-family> = 
  [ <family-name> | <generic-family> ]#  

<system-family-name> = 
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar     

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>  

<length-percentage> = 
  <length>      |
  <percentage>  

<family-name> = 
  <string>         |
  <custom-ident>+  

<generic-family> = 
  <generic-script-specific>  |
  <generic-complete>         |
  <generic-incomplete>       

<generic-script-specific> = 
  generic( fangsong )   |
  generic( kai )        |
  generic( khmer-mul )  |
  generic( nastaliq )   

<generic-complete> = 
  serif       |
  sans-serif  |
  system-ui   |
  cursive     |
  fantasy     |
  math        |
  monospace   

<generic-incomplete> = 
  ui-serif       |
  ui-sans-serif  |
  ui-monospace   |
  ui-rounded     

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

Compatibilité des navigateurs