La propriété font de CSS est utilisée pour contrôler l’aspect des textes. En utilisant la propriété de police CSS, vous pouvez modifier la taille du texte, la couleur, le style, etc. Vous avez déjà étudié comment rendre le texte en gras ou souligné. Ici, vous saurez également comment redimensionner votre police à l’aide de pourcentage.
Voici quelques attributs de police importants:
- font-color: Cette propriété est utilisée pour changer la couleur du texte. (attribut autonome)
- font-family: Cette propriété est utilisée pour changer le visage de la police.
- font-size: Cette propriété est utilisée pour augmenter ou diminuer la taille de la police.
- font-style: Cette propriété est utilisée pour rendre la police en gras, italique ou oblique.
- font-variant: Cette propriété crée un effet de petite majuscule.
- font-weight: Cette propriété est utilisée pour augmenter ou diminuer l’audace et la légèreté de la police.
1) Couleur de police CSS
La couleur de la police CSS est un attribut autonome en CSS, même s’il semble faire 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 RGB
Dans l’exemple ci-dessus, nous avons défini tous ces formats.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>Ceci est le titre 1</h1>
<h2>Ceci est le titre 2</h2>
<p>Ceci est une paragraphe.</p>
</body>
</html>
Résultat :
2) CSS font-family
Les polices CSS peuvent être divisées en deux types:
- Famille générique: comprend Serif, Sans-Serif et Monospace.
- Famille de police: spécifie le nom de famille de la police comme Arial, New Times Roman, etc.
Serif: les polices Serif incluent des lignes minuscules à la fin des caractères. Exemple de serif: Times new roman, Georgia etc.
Sans-serif: une police sans-serif n’inclut pas les petites lignes à la fin des caractères. Exemple de sans-serif: Arial, Verdana, etc.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>Titre avec font sans-serif.</h1>
<h2>Titre avec font serif.</h2>
<p>Paragraphe écrite avec monospace.</p>
</body>
</html>
Résultat :
3) CSS font-size
La propriété CSS font-size permet de modifier la taille de la police.
Voici les valeurs possibles pouvant être utilisées pour définir la taille de la police:
| Taille de la police | La description |
|---|---|
| xx-small | utilisé pour afficher la taille de texte extrêmement petite. |
| x-small | utilisé pour afficher la taille de texte extra petite. |
| small | utilisé pour afficher une petite taille de texte. |
| medium | utilisé pour afficher une taille de texte moyenne. |
| large | 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. |
| smaller | utilisé pour afficher une taille de texte comparativement plus petite. |
| larger | utilisé pour afficher une taille de texte comparativement plus grande. |
| taille en pixels ou en % | utilisé pour définir la valeur en pourcentage ou en pixels. |
<html> <head> <title>CSS font-size propriété</title> </head> <body> <p style="font-size:xx-small;"> Cette taille de police est extrêmement petite.</p> <p style="font-size:x-small;"> Cette taille de police est extra petite.</p> <p style="font-size:small;"> Cette taille de police est petite.</p> <p style="font-size:medium;"> Cette taille de police est extra moyenne. </p> <p style="font-size:large;"> Cette taille de police est large. </p> <p style="font-size:x-large;"> Cette taille de police est extra large. </p> <p style="font-size:xx-large;"> Cette taille de police est extrêmement large. </p> <p style="font-size:smaller;"> Cette taille de police est plus petite. </p> <p style="font-size:larger;"> Cette taille de police est plus large. </p> <p style="font-size:200%;"> Cette taille de police est 200%. </p> <p style="font-size:20px;"> Cette taille de police est 20 pixels. </p> </body> </html>
Résultat :
4) CSS Style de font
La propriété font-style de CSS définit le type de police que vous souhaitez afficher. Il peut être italique, oblique ou normal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>Titre font italic.</h2>
<h3>Titre font oblique.</h3>
<h4>Titre font normal.</h4>
</body>
</html>
Résultat :
5) CSS Font Variant
La propriété font-variant de CSS spécifie comment définir la variante de police d’un élément. Ce peut être normal et petites capitalisations.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>Cet en-tête est affiché en caractères normaux.</h3>
<p>Ce paragraphe est affiché en petite police.</p>
</body>
</html>
Résultat :
6) CSS Font Weight
La propriété font-weight de CSS définit l’épaisseur de la police et spécifie le niveau de gras d’une police. Les valeurs possibles du poids de la police peuvent être normal, gras, gras, gras ou nombre (100, 200, jusqu’à 900).
<!DOCTYPE html> <html> <body> <p style="font-weight:bold;">Ce font est en gras.</p> <p style="font-weight:bolder;">Ce font est plus gras.</p> <p style="font-weight:lighter;">Ce font est léger.</p> <p style="font-weight:100;">Font avec 100.</p> <p style="font-weight:200;">Font avec 200.</p> <p style="font-weight:300;">Font avec 300.</p> <p style="font-weight:400;">Font avec 400.</p> <p style="font-weight:500;">Font avec 500.</p> <p style="font-weight:600;">Font avec 600.</p> <p style="font-weight:700;">Font avec 700.</p> <p style="font-weight:800;">Font avec 800.</p> <p style="font-weight:900;">Font avec 900.</p> </body> </html>
Résultat :
