Pour modifier la taille du texte, on utilise la propriété CSS font-size. Mais comment indiquer la taille du texte ? C'est là que les choses se corsent car plusieurs techniques vous sont proposées :
Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
font-size: 16px; |
Les lettres auront une taille de 16 pixels, comme le montre la figure suivante.
Une lettre de 16 pixels de hauteur
Voici un exemple d'utilisation (placez ce code dans votre fichier .css) :
p { font-size: 14px; /* Paragraphes de 14 pixels */ } h1 { font-size: 40px; /* Titres de 40 pixels */ } |
Et le résultat est visible à la figure suivante.
Différentes tailles de texte
Si vous le souhaitez, vous pouvez également définir des tailles en centimètres ou millimètres. Remplacez « px » par « cm » ou « mm ». Ces unités sont cependant moins bien adaptées aux écrans.
C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais comme ceux-ci :
Vous pouvez tester l'utilisation de ces valeurs dans votre code CSS :
p { font-size: small; } h1 { font-size: large; } |
Bon, cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms). Heureusement, il existe d'autres moyens. Ma technique préférée consiste à indiquer la taille en « em ».
Faites attention : pour les nombres décimaux, il faut mettre un point et non une virgule. Vous devez donc écrire « 1.4em » et non pas « 1,4em » !
p { font-size: 0.8em; } h1 { font-size: 1.3em; } |
D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui fonctionne sur le même principe que le em mais qui est plus petit de base) et le pourcentage (80%, 130%…).
Créé avec HelpNDoc Personal Edition: Générateur d'aide complet