CSS : Propriété font - Gestion des polices

Plusieurs propriétés CSS sont disponibles afin de présenter le texte avec une police de caractères (et plusieurs autres paramètres : taille, graisse, italique, etc...).

Police de caractères : font-family

Indique la police de caractères du texte.
Les noms de police doivent être indiquées en les séparant par une virgule.
La dernière police indiquée est en règle générale une police générique :

• serif
• sans-serif
• monospace
• cursive
• fantasy

Note : si vous utilisez une police de caractères contenant des espaces, il faut l'indiquer avec des guillemets.

Exemple(s)

<p style="font-family : "Times New Roman", Times, serif;">Times New Roman</p>
<p style="font-family : Arial, Helvetica, sans-serif;">Arial</p>

Taille de la police : font-size

Indique la taille de police.
La valeur peut être exprimé en px (pixel), em (unité relative), % (pourcentage), pt (point).
Les valeurs suivantes peuvent aussi être utilisées (de la taille la plus petite à la plus grande) :

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Exemple(s)

<p style="font-size : 12px;">12px</p>
<p style="font-size : 25%;">25%</p>
<p style="font-size : 2em;">2em</p>

Inclinaison de la police : font-style

Indique l'inclinaison de la police (italique, oblique, normal).

Exemple(s)

	<p style="font-style : italic;">Texte en italique</p>
	<p style="font-style : oblique;">Texte en oblique (disponible suivant la police utilisée)</p>
	<p style="font-style : normal;">Normal</p>

Graisse de la police : font-weight

Indique la graisse de la police (gras).
La valeur est un nombre entre 100 et 900.
Les valeurs suivantes peuvent aussi être utilisées :

• lighter
• normal
• bold
• bolder

Exemple(s)

<p style="font-weight : bold;">Gras</p>
<p style="font-weight : 300;">Gras</p>

Casse du texte : font-variant

Indique la casse de la police (normal ou petite majuscule).
La valeur peut être soit :

• small-caps (petite majuscule)
  
• normal
  

Exemple(s)

<p style="font-variant : small-caps;">Texte en petite majuscules</p>
<p style="font-variant : normal;">Normal</p>