La propriété font-size en CSS est utilisée pour spécifier la hauteur et la taille de la police. Cela affecte la taille du texte d'un élément. Sa valeur par défaut est moyenne et peut être appliquée à chaque élément. Les valeurs de cette propriété incluent xx-petit , petit , x-petit , etc.

Syntaxe

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

La taille de la police peut être relative ou absolue.

Taille absolue

Il est utilisé pour définir le texte à une taille définie. En utilisant la taille absolue, il n'est pas possible de modifier la taille du texte dans tous les navigateurs. C'est avantageux lorsque nous connaissons la taille physique de la sortie.

Taille relative

Il est utilisé pour définir la taille du texte par rapport à ses éléments voisins. Avec la taille relative, il est possible de modifier la taille du texte dans les navigateurs.

loup contre renard

REMARQUE : Si nous ne définissons pas de taille de police, alors pour le texte normal tel que les paragraphes, la taille par défaut est de 16 px, ce qui équivaut à 1em.

Taille de la police en pixels

Lorsque nous définissons la taille du texte en pixels, cela nous donne le contrôle total sur la taille du texte.

Exemple

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Taille de police avec em

Il est utilisé pour redimensionner le texte. La plupart des développeurs préfèrent dans au lieu de pixels . Il est recommandé par le consortium du World Wide Web (W3C). Comme indiqué ci-dessus, la taille du texte par défaut dans les navigateurs est de 16 pixels. On peut donc dire que la taille par défaut de 1em est 16px .

La formule pour calculer la taille de pixels à dans est em = pixels/16 .

Exemple

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Taille de police réactive

Nous pouvons définir la taille du texte en utilisant un unité vw , qui représente le ' largeur de la fenêtre '. La fenêtre d'affichage correspond à la taille de la fenêtre du navigateur.

quand l'école a-t-elle été inventée

1vw = 1 % de la largeur de la fenêtre.

Si la largeur de la fenêtre est de 50 cm, alors le 1vw est égal à 0,5 cm.

Exemple

Premier paragraphe ayant la largeur de 5vw.

Deuxième paragraphe ayant la largeur de 10vw.

Taille de police avec la propriété length

Il est utilisé pour définir la taille de la police en longueur. La longueur peut être en cm, px, pt, etc. Valeurs négatives de longueur les propriétés ne sont pas autorisées dans la taille de la police.

Syntaxe

 font-size: length; 

Exemple

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>