Taille de la police CSS
Taille de police
La font-sizepropriété définit la taille du texte.
Être capable de gérer la taille du texte est important dans la conception Web. Cependant, vous ne devez pas utiliser les ajustements de taille de police pour que les paragraphes ressemblent à des titres ou que les titres ressemblent à des paragraphes.
Utilisez toujours les balises HTML appropriées, comme <h1> - <h6> pour les titres et <p> pour les paragraphes.
La valeur font-size peut être une taille absolue ou relative.
Taille absolue :
- Définit le texte à une taille spécifiée
- Ne permet pas à un utilisateur de modifier la taille du texte dans tous les navigateurs (mauvais pour des raisons d'accessibilité)
- La taille absolue est utile lorsque la taille physique de la sortie est connue
Taille relative:
- Définit la taille par rapport aux éléments environnants
- Permet à un utilisateur de modifier la taille du texte dans les navigateurs
Remarque : Si vous ne spécifiez pas de taille de police, la taille par défaut pour le texte normal, comme les paragraphes, est de 16px (16px=1em).
Définir la taille de la police avec des pixels
Définir la taille du texte en pixels vous donne un contrôle total sur la taille du texte :
Exemple
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Conseil : Si vous utilisez des pixels, vous pouvez toujours utiliser l'outil de zoom pour redimensionner la page entière.
Définir la taille de la police avec Em
Pour permettre aux utilisateurs de redimensionner le texte (dans le menu du navigateur), de nombreux développeurs utilisent em au lieu de pixels.
1em est égal à la taille de police actuelle. La taille de texte par défaut dans les navigateurs est de 16 pixels. Ainsi, la taille par défaut de 1em est de 16px.
La taille peut être calculée de pixels à em en utilisant cette formule : pixels /16= em
Exemple
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Dans l'exemple ci-dessus, la taille du texte en em est la même que dans l'exemple précédent en pixels. Cependant, avec la taille em, il est possible d'ajuster la taille du texte dans tous les navigateurs.
Malheureusement, il y a toujours un problème avec les anciennes versions d'Internet Explorer. Le texte devient plus grand qu'il ne le devrait lorsqu'il est agrandi et plus petit qu'il ne le devrait lorsqu'il est réduit.
Utilisez une combinaison de pourcentage et Em
La solution qui fonctionne dans tous les navigateurs consiste à définir une taille de police par défaut en pourcentage pour l'élément <body> :
Exemple
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Notre code fonctionne maintenant très bien ! Il affiche la même taille de texte dans tous les navigateurs et permet à tous les navigateurs de zoomer ou de redimensionner le texte !
Taille de police réactive
La taille du texte peut être définie avec une vwunité, c'est-à-dire la "largeur de la fenêtre".
De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
Bonjour le monde
Redimensionnez la fenêtre du navigateur pour voir comment la taille de la police est mise à l'échelle.
Exemple
<h1 style="font-size:10vw">Hello World</h1>
Viewport est la taille de la fenêtre du navigateur. 1vw = 1 % de la largeur de la fenêtre. Si la fenêtre a une largeur de 50 cm, 1vw est de 0,5 cm.