Choisir une police
font-family définit la police à utiliser.
Familles de polices génériques
Les polices sont regroupées dans 5 familles génériques :
serif(les polices ont des petites lignes au(x) pied(s) de chaque caractère – empattements.)sans-serifmonospacecursivefantasy
cursive et fantasy sont rarement utilisées.
La propriété font-family étant héritée de tous les éléments enfants HTML, vous pouvez appliquer une police à l’ensemble du document HTML en l’appliquant sur l’ancêtre de tous les éléments HTML : l’élément <body>.
body { font-family: sans-serif;}Avec cette règle CSS, la page Web utilisera la police sans-serif définie par l’utilisateur dans les préférences de son navigateur.
Polices Web sécurisées / sûres
Le problème avec l’utilisation de noms de polices génériques est que la conception de votre page Web s’appuiera sur la police définie par l’utilisateur dans les paramètres de son navigateur.
Comme vous voulez probablement que votre page Web ait la même apparence sur l’ordinateur de n’importe quel ordinateur, vous voudrez définir une police spécifique à utiliser. Pour ce faire, utilisez simplement le nom de la police.
body { font-family: Arial;}Votre page Web utilisera Arial à condition qu’elle soit installée sur l’ordinateur de l’utilisateur. Si la police Arial n’est pas disponible sur l’ordinateur de l’utilisateur, elle utilisera la police avec empattement par défaut du navigateur (qui est généralement Times).
Arial est un choix sûr, car il est installé sur tous les ordinateurs Windows et Mac, ainsi que sur la plupart des systèmes Linux. C’est la raison pour laquelle Arial est considérée comme une police Web : vous pouvez l’utiliser en toute sécurité dans votre code CSS et avoir la certitude qu’elle est installée sur votre ordinateur.
Il existe 9 polices Web sécurisées / sûres :
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Appliquer une liste de polices
Bien que l’utilisation de l’une de ces valeurs pour la propriété font-family constitue une valeur sûre, vous pouvez définir des valeurs de secours en écrivant une liste de familles de polices :
body { font-family: Arial, Verdana, sans-serif;}En définissant plusieurs valeurs pour font-family, le navigateur cherchera la première valeur Arial et l’utilisera. S’il n’est pas disponible, il utilisera le suivant Verdana. Enfin, si celui-ci n’est pas disponible non plus, il utilisera la police sans-serif par défaut du navigateur.
Il est recommandé d’utiliser une famille générique comme dernière valeur. Si vous ne pouvez pas définir la police spécifique à utiliser, vous pouvez au moins définir le type de police souhaité.
Il est possible d’inclure une police dans une page Web pour les concepteurs souhaitant utiliser davantage de polices originales tout en souhaitant que leur page Web soit exactement identique sur l’ensemble des ordinateurs / navigateurs. Ainsi, ils s’assurent que la police est disponible même si elle n’est pas présente sur l’ordinateur de l’utilisateur, tout simplement parce que le site Web fournit la police.
Nous étudierons cette méthode appelée @font-face, et verrons comment des services tels que Google Fonts ou Typekit peuvent vous aider.