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> Testez-le maintenant 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> Testez-le maintenant 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.
Testez-le maintenantTaille 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> Testez-le maintenant