Police du texte et taille du texte

La police du texte et la taille du texte sont deux choses que nous avons déjà vues en html pure, cependant nous allons voir comment choisir la police et la taille du texte mais en CSS.

Puisque ces deux notions ne vous sont pas étrangères, nous n’allons pas rester ici à vous expliquer ce que sont, sinon retournez lire nos cours de html.

1) Police du texte :

Pour choisir la police du texte en CSS, on utilise font-family.
Syntaxe : font-family : police-du-texte ;

Il est recommandé de mettre le mot qui désigne la police du texte dans des guillemets anglais surtout si le mot est un mot composé.Il est à savoir que les guillemets anglais sont facultatifs.
Syntaxe : font-family : "police du texte " ;

Exemple :
Code html :
<h2>Ce titre est en Cooper black</h2> <h3>Ce titre est en chiller</h3> Ce texte est en Times New Roman Ce texte est en Cambria Ce texte est en Calibri Ce texte est en Arial Ce texte est en Castellar Ce texte est en Verdana
Code CSS:
h2 { font-family:"Cooper black"; } h3 { font-family:Chiller; } .times { font-family:"Times New Roman"; } .cambria { font-family:"Cambria"; } .calibri { font-family: Calibri; } .arial { font-family:Arial; } .castellar { font-family:Castellar; } .verdana { font-family:Verdana; }

2) La taille du texte :

Pour déterminer la taille du texte, on utilise font-size.
Syntaxe : font-size : taille ;

La taille est souvent exprimer en pixel (px).
Exemple :
code html :
Ce texte mesure 22px de hauteur
code css :
p { font-size: 22px; }

Voici une autre méthode de déterminer la taille sans utiliser des pixels :
xx-small : beaucoup plus petit
x-small : très petit
small : petit
medium : moyen
large : grand
x-large : plus grand
xx-large : beaucoup plus grand
Exemple :
code html :
Ce texte a une taille petite Ce texte est grand Ce texte est beaucoup plus grand
code css :
.petit { font-size: small; } .grand { font-size: large; } .beaucouplusgrand { font-size: xx-large; }