CSS Polices
La sélection de la police est importante
Choisir la bonne police a un impact considérable sur l'expérience des lecteurs sur un site web.
La bonne police peut créer une forte identité pour votre marque.
Il est important de choisir une police qui soit facile à lire, ainsi qu'une bonne couleur et une taille appropriée pour celle-ci.
La propriété font-family en CSS
La propriété CSS font-family spécifie la police d'un élément.
Astuce : La propriété font-family doit contenir plusieurs noms de polices comme un système de "repli". Si le navigateur ne prend pas en charge la première police, il essaie la suivante. Les noms de polices doivent être séparés par des virgules.
Commencez toujours par la police que vous souhaitez et terminez par une famille générique, afin que le navigateur puisse choisir une police similaire dans cette famille si aucune autre n'est disponible.
Remarque : Si le nom de la police comporte plus d'un mot, il doit être entre guillemets, comme : "Times New Roman".
Astuce : Lisez-en plus sur les polices de repli dans Polices Web Safe CSS .
Exemple
Spécifiez quelques 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;
} Familles de polices génériques CSS
En CSS, il existe cinq familles de polices génériques :
- Polices Serif - ont un petit trait aux bords de chaque lettre, créant un sentiment de formalité et d'élégance.
- Polices Sans-serif - ont des lignes épurées (sans petits traits attachés), offrant un look moderne et minimaliste.
- Polices Monospace - toutes les lettres ont la même largeur fixe, créant un aspect mécanique.
- Polices Cursives - imitent l'écriture manuscrite humaine.
- Polices Fantaisie - sont des polices décoratives et ludiques.
Tous les différents noms de polices 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-serif sont considérées comme plus faciles à lire que les polices serif.
Quelques exemples de polices
| Famille de polices générique | Exemples de noms de polices |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantaisie | Copperplate Papyrus |