Voici maintenant les propriétés relatives aux polices de caractères. Comme dans la page précédente, la valeur inherit pour une propriété indique que la valeur doit être héritée de l'élément
parent ; si une valeur apparait en caractères gras dans un tableau, c'est qu'il s'agit de la valeur par défaut.
Le tableau suivant donne les propriétés et les valeurs les plus courantes concernant la police de caractères :
| Propriété | Valeurs possibles |
|---|---|
| font-family | nom de police | serif | sans-serif | cursive | fantasy | monospace | inherit |
| font-size | hauteur | xx-small | x-small | small | medium | large | x-large | xx-large | pourcentage | smaller | larger | inherit |
| font-style | normal | italic | oblique | inherit |
| font-variant | normal | small-caps | inherit |
| font-weight | normal | bold | nombre : 100, 200, … , 900 (400 = normal, 700 = bold) | lighter | bolder | inherit |
Ces déclarations doivent être interprétées de la manière suivante :
font-family détermine la police de caractères. Vous pouvez donner un nom de police spécifique comme Verdana ou 'Times New Roman'.
Le nom doit être écrit de manière exacte, en respectant la casse. Si le nom comporte plusieurs mots, ils doivent être encadrés par des guillemets anglais simples ('…') ou doubles ("…").
Vous pouvez spécifier plus d'une police de caractères, en séparant leurs noms par des virgules; le navigateur choisira la première de ces polices qui est installée sur l'ordinateur client.
Vous pouvez aussi utiliser des types de
polices génériques comme serif (police à empattement), sans-serif (police sans empattement), cursive, fantasy
(police décorative) ou monospace (police à chasse fixe).
La police par défaut varie d'un navigateur à l'autre ; c'est le plus souvent une police avec empattement¹.
font-size spécifie la taille de la police. Ceci peut être fait en donnant une hauteur de manière absolue (p. ex. 16px) ou en utilisant un qualificatif qui
varie de extra extra petite (xx-small) à extra extra grande (xx-large) en passant par moyenne (medium).
La taille peut aussi être spécifiée relativement à la taille de police de l'élément
parent en utilisant un pourcentage (p. ex. 75%) ou les qualificatifs plus petite (smaller) ou plus grande (larger).
font-style indique si on veut une police normale, italique ou oblique (inclinée comme une police italique, mais basée sur la police normale).
font-variant spécifie une police normale ou en petites capitales (small-caps).
font-weight définit la graisse de la police. Les choix habituels sont normale ou grasse (bold). Théoriquement, il est aussi possible d'utiliser des nombres
(100, 200, … , 900) mais le résultat dépendra du nombre de polices installées sur l'ordinateur client.
On peut aussi spécifier la graisse de la police relativement à celle de la police de l'élément parent : lighter (moins grasse, si disponible) ou bolder
(plus grasse, également si disponible).
¹ Ceci parait un peu paradoxal, car on considère généralement que ce sont les polices sans empattement qui sont les plus lisibles sur un écran.
Il existe également une propriété font qui peut être utilisée pour spécifier simultanément les valeurs des propriétés suivantes :
font-style, font-variant, font-weight, font-size, line-height et font-family,
Voici un exemple : font: bold 12px/1.5em Arial, sans-serif;. À noter que (i) certaines propriétés peuvent être omises, mais il faut respecter l'ordre et (ii) les différentes valeurs sont
séparées par des espaces, sauf pour font-size et line-height qui sont séparées par une barre de fraction.