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

csssélecteur {
  font-size: valeur;
}

Valeurs sous forme de mots-clés

Valeur par défaut : medium.

Exemple

Définissons une taille de police de 20px pour les paragraphes :

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  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 :

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  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) :

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  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 :

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: