Propriété font-size
La propriété font-size définit la taille
de police du texte. Les valeurs de la propriété sont
n'importe quelle unité
de taille (généralement, c'est px, em
ou rem) ou des mots-clés spéciaux
(utilisés très rarement).
Syntaxe
sélecteur {
font-size: valeur;
}
Valeurs sous forme de mots-clés
| Valeur | Description |
|---|---|
xx-small |
Le plus petit. Exemple : Lorem ipsum dolor sit amet. |
x-small |
Très petit. Exemple : Lorem ipsum dolor sit amet. |
small |
Petit. Exemple : Lorem ipsum dolor sit amet. |
medium |
Moyen. Exemple : Lorem ipsum dolor sit amet. |
large |
Grand. Exemple : Lorem ipsum dolor sit amet. |
x-large |
Très grand. Exemple : Lorem ipsum dolor sit amet. |
xx-large |
Le plus grand. Exemple : Lorem ipsum dolor sit amet. |
larger |
Plus grand que la police du parent d'une certaine valeur. |
smaller |
Plus petit que la police du parent d'une certaine valeur. |
Valeur par défaut : medium.
Exemple
Définissons une taille de police de
20px pour les paragraphes :
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Exemple
Dans cet exemple, une taille de
16px est définie pour le paragraphe,
et de 150% pour le span à l'intérieur.
Dans ce cas, la taille de police pour le span sera
de 150% par rapport à son parent,
c'est-à-dire le paragraphe, et sa taille réelle sera
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Exemple
Dans cet exemple, une taille de
16px est définie pour le paragraphe,
et larger pour le span à l'intérieur.
Dans ce cas, la taille de police pour le span sera
plus grande que celle de son parent (le paragraphe) :
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Exemple
Notez que les polices avec différentes
font-family
et le même font-size peuvent visuellement avoir
des tailles complètement différentes (pour résoudre ce
problème, voir la propriété font-size-adjust).
Dans l'exemple ci-dessous, les deux paragraphes ont une font-size
de 16px, mais des font-family différentes :
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
:
