Polices CSS
Choisir la bonne police pour votre site Web est important!
La sélection de la police est importante
Le choix de la bonne police a un impact énorme sur la façon dont les lecteurs vivent un site Web.
La bonne police peut créer une identité forte pour votre marque.
Il est important d'utiliser une police facile à lire. La police ajoute de la valeur à votre texte. Il est également important de choisir la bonne couleur et la bonne taille de texte pour la police.
Familles de polices génériques
En CSS, il existe cinq familles de polices génériques :
- Les polices Serif ont un petit trait sur les bords de chaque lettre. Ils créent un sentiment de formalité et d'élégance.
- Les polices sans empattement ont des lignes épurées (pas de petits traits attachés). Ils créent un look moderne et minimaliste.
- Polices Monospace - ici toutes les lettres ont la même largeur fixe. Ils créent un look mécanique.
- Les polices cursives imitent l'écriture humaine.
- Les polices Fantasy sont des polices décoratives/ludiques.
Tous les différents noms de police appartiennent à l'une des familles de polices génériques.
Différence entre les polices Serif et Sans-serif
Remarque : Sur les écrans d'ordinateur, les polices sans empattement sont considérées comme plus faciles à lire que les polices avec empattement.
Quelques exemples de polices
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
La propriété CSS font-family
En CSS, on utilise la font-familypropriété pour spécifier la police d'un texte.
Remarque : Si le nom de la police est composé de plusieurs mots, il doit être entre guillemets, comme : "Times New Roman".
Conseil : La font-familypropriété doit contenir plusieurs noms de polices en tant que système "de secours", afin d'assurer une compatibilité maximale entre les navigateurs/systèmes d'exploitation. Commencez par la police souhaitée et terminez par une famille générique (pour laisser le navigateur choisir une police similaire dans la famille générique, si aucune autre police n'est disponible). Les noms de police doivent être séparés par une virgule. En savoir plus sur les polices de secours dans le chapitre suivant .
Exemple
Spécifiez des polices différentes pour trois paragraphes :
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}