5.5 Raccourci de police CSS

18 octobre 2018

Un raccourci pour plusieurs propriétés de police

En CSS, certaines propriétés peuvent être regroupées sous une autre propriété, pour gagner du temps et de l’espace. La propriété de font police regroupe (dans cet ordre particulier) :

font-style
font-variant
font-weight
font-size
line-height
font-family

Vous pouvez ainsi définir 6 propriétés à travers une seule :

body {font: italic small-caps bold 16px/1.5 Arial, sans-serif;}

Ils doivent être écrits dans cet ordre particulier et il doit y avoir une barre oblique / entre le font-size et le line-height.

Bien que j’ai défini les 6 propriétés, seules font-size et font-family sont obligatoires. Vous pouvez donc omettre de définir les autres propriétés si vous souhaitez conserver leurs valeurs par défaut :

body {font: bold 16px/1.5 Arial, sans-serif;}

Comme font-style et font-variant n’ont pas été définies, ils utiliseront leur valeur par défaut normal.

Attention ! Si vous avez précédemment défini l’une des propriétés de la police et que vous utilisez le raccourci de font par la suite, les valeurs précédemment définies seront remplacées.

body { font-size: 16px; line-height: 1.5;}
ul { font: 14px Georgia, serif;}

Dans le raccourci font, line-height n’a pas été définie. Elle perd la valeur de 1.5 de son ancêtre et revient à sa valeur par défaut (qui est généralement 1.2).

Il existe d’autres propriétés abrégées, telles que l’arrière-plan, la bordure et la marge (respectivement background, border et margin).