font
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété font
est :
- une propriété raccourcie permettant de définir rapidement
font-style
,font-variant
,font-weight
,font-stretch
,font-size
,line-height
etfont-family
- 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.
Exemple interactif
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 :
-
La déclaration pourra éventuellement inclure des valeurs pour :
-
Les valeurs pour
font-style
,font-variant
etfont-weight
doivent précéder la valeur pourfont-size
-
La valeur de
font-variant
ne peut utiliser que les valeurs définies en CSS 2.1 :normal
etsmall-caps
-
La valeur de
font-stretch
ne peut être qu'un mot-clé. -
La valeur pour
line-height
doit immédiatement suivre la valeur pourfont-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
. -
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
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
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 |
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( kai ) |
generic( fangsong ) |
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
Specification |
---|
CSS Fonts Module Level 4 # font-prop |
Compatibilité des navigateurs
BCD tables only load in the browser