La propriété CSS Font est utilisée pour contrôler l’apparence des textes. En utilisant la propriété de police CSS, vous pouvez modifier la taille, la couleur, le style du texte, etc. Vous avez déjà étudié comment mettre du texte en gras ou souligné. Ici, vous saurez également comment redimensionner votre police en utilisant un pourcentage.
Voici quelques attributs de police importants :
1) Couleur de la police CSS
La couleur de la police CSS est un attribut autonome en CSS bien qu'il semble qu'elle fasse partie des polices CSS. Il est utilisé pour changer la couleur du texte.
Il existe trois formats différents pour définir une couleur :
- Par un nom de couleur
- Par valeur hexadécimale
- Par RVB
Dans l'exemple ci-dessus, nous avons défini tous ces formats.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Testez-le maintenant Sortir:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Taille de la police CSS
La propriété CSS font size est utilisée pour modifier la taille de la police.
Voici les valeurs possibles qui peuvent être utilisées pour définir la taille de la police :
| Valeur de la taille de police | Description |
|---|---|
| xx-petit | utilisé pour afficher la taille du texte extrêmement petite. |
| x-petit | utilisé pour afficher la taille du texte très petite. |
| petit | utilisé pour afficher une petite taille de texte. |
| moyen | utilisé pour afficher une taille de texte moyenne. |
| grand | utilisé pour afficher une grande taille de texte. |
| x-large | utilisé pour afficher une taille de texte très grande. |
| xx-large | utilisé pour afficher une taille de texte extrêmement grande. |
| plus petit | utilisé pour afficher une taille de texte comparativement plus petite. |
| plus grand | utilisé pour afficher une taille de texte comparativement plus grande. |
| taille en pixels ou % | utilisé pour définir la valeur en pourcentage ou en pixels. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Testez-le maintenant
Sortir:
Cette taille de police est extrêmement petite.
Cette taille de police est très petite
Cette taille de police est petite
Cette taille de police est moyenne.
angles adjacents
Cette taille de police est grande.
Cette taille de police est très grande.
Cette taille de police est extrêmement grande.
Cette taille de police est plus petite.
Cette taille de police est plus grande.
Cette taille de police est définie sur 200 %.
stdin en c
Cette taille de police est de 20 pixels.
4) Style de police CSS
La propriété CSS Font style définit le type de police que vous souhaitez afficher. Il peut être italique, oblique ou normal.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Testez-le maintenant Sortir:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Variante de police CSS
La propriété CSS font variant spécifie comment définir la variante de police d’un élément. Cela peut être normal et en petites capitalisations.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Testez-le maintenant Sortir:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Poids de la police CSS
La propriété CSS Font Weight définit le poids de la police et spécifie le degré de gras d'une police. Les valeurs possibles d'épaisseur de police peuvent être normales, grasses, plus grasses, plus claires ou numériques (100, 200..... jusqu'à 900).
Cette police est en gras.
Cette police est plus audacieuse.
Cette police est plus légère.
Cette police a un poids de 100.
Cette police a un poids de 200.
Cette police a un poids de 300.
Cette police a un poids de 400.
Cette police a un poids de 500.
Cette police a un poids de 600.
Cette police a un poids de 700.
Cette police a un poids de 800.
Cette police a un poids de 900.
Testez-le maintenantSortir:
Cette police est en gras.
comment supprimer une colonne dans postgresql
Cette police est plus audacieuse.
Cette police est plus légère.
Cette police a un poids de 100.
Cette police a un poids de 200.
Cette police a un poids de 300.
Cette police a un poids de 400.
Cette police a un poids de 500.
Cette police a un poids de 600.
Cette police a un poids de 700.
Cette police a un poids de 800.
Cette police a un poids de 900.