Police - Astuces CSS | CSS Almanach 2025

La fontpropriété en CSS est une propriété abrégée qui combine toutes les sous-propriétés suivantes dans une seule déclaration.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Il existe sept fontsous-propriétés, dont:

font-stretch: cette propriété définit la largeur de la police, telle que condensée ou développée.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: fait apparaître le texte en italique ou en oblique.
- normal
- italic
- oblique
- inherit
font-variant: change le texte cible en petites majuscules.
- normal
- small-caps
- inherit
font-weight: définit le poids ou l'épaisseur de la police.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: définit la hauteur de la police.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: définit la quantité d'espace au-dessus et au-dessous des éléments en ligne.
- normal
- number (font-size multiplier)
- percentage
font-family: définit la police appliquée à l'élément.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Raccourcis de police Gotchas

La fontpropriété n'est pas aussi simple que d'autres propriétés abrégées, en partie en raison des exigences de syntaxe et en partie en raison de problèmes d'héritage.

Voici un résumé de certaines des choses que vous devez savoir lorsque vous utilisez cette propriété abrégée.

Valeurs obligatoires

Deux des valeurs fontabrégées sont obligatoires: font-sizeet font-family. Si l'un de ces éléments n'est pas inclus, la déclaration entière sera ignorée.

De plus, font-familydoit être déclarée en dernier de toutes les valeurs, sinon, encore une fois, la déclaration entière sera ignorée.

Valeurs facultatives

Les cinq autres valeurs sont facultatives. Si vous incluez l'un des font-style,, font-variantet font-weight, ils doivent figurer avant font-sizedans la déclaration. Si ce n'est pas le cas, ils seront ignorés et peuvent également entraîner l'ignorance des valeurs obligatoires.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Dans l'exemple ci-dessus, trois options sont incluses. Tant qu'ils sont définis auparavant font-size, ils peuvent être placés dans n'importe quel ordre.

L'inclusion line-heightest également facultative mais ne peut être déclarée qu'après font-sizeet uniquement après une barre oblique:

body ( font: 44px/20px Georgia, sans-serif; )

Dans l'exemple ci-dessus, le line-heightest «20px». Si vous omettez line-height, vous devez également omettre la barre oblique, sinon la ligne entière sera ignorée.

Utilisation de font-stretch

La font-stretchpropriété est nouvelle dans CSS3 si elle est utilisée dans un ancien navigateur qui ne supporte pas font-stretchen fontraccourci, il fera toute la ligne à ignorer.

La spécification recommande d'inclure une solution de secours sans font-stretch, comme ceci:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Héritage pour les options

Si vous omettez l'une des valeurs optianales (y compris line-height), les options omises n'hériteront pas des valeurs de leur élément parent, comme c'est souvent le cas avec les propriétés typographiques. Au lieu de cela, ils seront réinitialisés à leur état initial.

Par exemple:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Dans ce cas, les valeurs facultatives (italique, minuscules et gras) sont placées sur la fontdéclaration de l' élément. Celles-ci s'appliqueront également à la plupart des éléments enfants.

Cependant, comme nous avons redéclaré la fontpropriété sur les éléments de paragraphe, toutes les options seront réinitialisées sur les paragraphes, provoquant le retour du style, de la variante, de l'épaisseur et de la hauteur de ligne à leurs valeurs initiales.

Mots clés pour la définition des polices système

En plus de la syntaxe ci-dessus, la fontpropriété permet également l'utilisation de mots-clés comme valeurs. Elles sont:

caption
icon
menu
message-box
small-caption
status-bar

Ces valeurs de mot-clé définissent la police sur celle qui est utilisée sur le système d'exploitation de l'utilisateur pour cette catégorie particulière. Par exemple, la définition de «légende» définira la police de cet élément pour qu'elle utilise la même police que celle utilisée sur le système d'exploitation pour les contrôles sous-titrés (boutons, listes déroulantes, etc.).

Un seul mot-clé comprend la valeur entière:

body ( font: menu; )

Les autres propriétés mentionnées précédemment ne sont pas valides en conjonction avec ces mots clés. Ces mots-clés ne peuvent être utilisés qu'avec des fontraccourcis et ne peuvent être déclarés à l'aide d'aucune des propriétés individuelles de longhand.