CSS Taille de police
Taille de police CSS
La propriété CSS font-size est utilisée pour spécifier la taille du texte ou de la police.
Savoir gérer la taille du texte est très important dans la conception web.
Cependant, vous ne devez pas utiliser des ajustements de taille de police pour faire en sorte 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 font-size peut être définie à une taille absolue ou à une taille relative.
Tailles absolues :
-
px: Les pixels offrent un contrôle fixe et précis sur la taille de la police. -
xx-small,x-small,small,medium,large,x-large,xx-large. Ces mots-clés ont un ensemble de tailles prédéfini dans les navigateurs.
Tailles relatives :
-
em: Cette unité est relative à la taille de police de l'élément parent. -
rem: Cette unité est relative à la taille de police de l'élément racine HTML. -
%: Cette unité est relative à la taille de police de l'élément parent. -
smalleretlarger: Ces unités ajustent la taille de la police par rapport à l'élément parent.
Comment choisir la bonne unité ?
- Pour un contrôle fixe et précis,
pxpeut être utilisé. - Avec
px, la page web ne s'adaptera pas bien à différentes tailles d'écran ou aux préférences des utilisateurs. - La taille absolue peut être utile lorsque la taille physique de la sortie est connue.
- Pour des conceptions web évolutives, utilisez
emourem; elles permettent aux utilisateurs d'ajuster la taille du texte dans les paramètres de leur navigateur. - Le pourcentage (
%) peut être utile pour ajuster les tailles de police en fonction des éléments parents.
Définir la taille de police avec des pixels
Définir la taille du texte avec des pixels ( px ) vous donne un contrôle total sur la taille du texte.
Si vous utilisez des pixels, la page web peut ne pas bien s'adapter à différentes tailles d'écran et les utilisateurs ne peuvent pas ajuster la taille du texte dans les paramètres de leur navigateur. Cependant, ils peuvent toujours utiliser l'outil de zoom pour redimensionner l'ensemble de la page.
Exemple
Définir les tailles de police avec px :
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
} Définir la taille de police avec em
L'unité em est relative à la taille de police de l'élément parent. Donc, si l'élément parent a une taille de police de 16px, alors 2.5em donnerait 40px.
Dans l'exemple suivant, la taille du texte en em est la même que dans l'exemple précédent en pixels. Cependant, l'unité em permet à l'utilisateur d'ajuster la taille du texte dans les paramètres du navigateur.
Exemple
Définir les tailles de police avec em :
body {
font-size: 16px; /* Taille de police de base */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
} Définir la taille de police avec rem
L'unité rem est relative à la taille de police de l'élément racine HTML (<html>).
Contrairement à em , qui est relative à la taille de police de son élément parent, rem fait toujours référence à la taille de police de l'élément <html>, quelle que soit sa position dans l'arbre du document. Cela rend rem très utile pour créer des conceptions évolutives et réactives. En changeant la taille de police de l'élément <html>, tous les éléments dimensionnés avec des unités rem s'adapteront proportionnellement sur l'ensemble de la page.
La taille de police par défaut de l'élément <html> dans la plupart des navigateurs est de 16px. Donc, par défaut, 1rem équivaut à 16px, sauf si cela est explicitement remplacé dans le CSS.
Exemple
Définir les tailles de police avec rem :
html {
font-size: 16px; /* Définir la taille de police racine */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
} L'unité vw
La taille de police peut également être définie avec l'unité vw , qui signifie "largeur de la fenêtre d'affichage".
L'unité vw est une unité relative qui représente un pourcentage de la largeur de la fenêtre d'affichage.
1vw = 1% de la largeur actuelle de la fenêtre d'affichage du navigateur. Donc, si la fenêtre d'affichage fait 500px de large, 1vw équivaut à 5px.
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 évolue.
Exemple
h1 {
font-size:10vw;
}
p {
font-size:5vw;
}