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 :
- Serif les polices ont un petit trait sur les bords de chaque lettre. Ils créent un sentiment de formalité et d’élégance.
- Sans empattement les polices ont des lignes épurées (pas de petits traits attachés). Ils créent un look moderne et minimaliste.
- Monospace polices – ici toutes les lettres ont la même largeur fixe. Ils créent un look mécanique.
- Cursive les polices imitent l’écriture humaine.
- Fantaisie les polices 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
Note: 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
| Famille de polices génériques | Exemples de noms de polices |
|---|---|
| Serif | Times New Roman Géorgie Garamond |
| Sans empattement | Arial Verdana Helvétique |
| Monospace | Courrier Nouveau Console Lucida Monaco |
| Cursive | Brosse Script MT Écriture Lucida |
| Fantaisie | Plaque de cuivre Papyrus |
La propriété CSS font-family
En CSS, on utilise le font-family propriété pour spécifier la police d’un texte.
Note: Si le nom de la police est composé de plusieurs mots, il doit être entre guillemets, comme : « Times New Roman ».
Conseil: Le font-family La proprié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 {
famille de polices : « Times New Roman », Times, serif ;
}
.p2 {
famille de polices : Arial, Helvetica, sans empattement ;
}
.p3 {
famille de polices : « Console Lucida », « Courier New », espace fixe ;
}
Essayez-le vous-même »
#Polices #CSS