Les fonts web safe
Avec CSS, on peut définir la police utilisée avec la propriété font-family.
body{
font-family: Arial, Helvetica, sans-serif;
}Pourquoi définit-on plusieurs polices ?
Les navigateurs utilisent les polices qui sont installées sur la machine cliente. Comme il existe beaucoup de configurations différentes (Windows, Mac, Linux...) et que chaque configuration possède son propre jeu de police de base (par exemple, Arial est fournie avec Windows mais pas avec OSX et inversement pour la Helvetica), on fournit des listes de polices plus ou moins similaires et compatibles pour assurer un même rendu pour tout le monde.
Serif, sans-serif, monospace
Quand aucune des polices indiquées n'est présente sur la machine cliente, on peut quand même lui spécifier quelle catégorie de police utiliser.
- serif : police à empattement
- sans-serif : police sans empattement (bâtons)
- monospace : police à chasse fixe (tous les caractères sont de la même largeur)
Utiliser une police qui n'est pas installée sur la machine cliente
Il est néanmoins possible de forcer l'utilisation d'une police qui ne serait pas présente sur la machine cliente. Il existe plusieurs services web qui fournissent des centaines de polices et des kits pour les installer facilement sur un site. Il faut bien vérifier les conditions d'utilisation des licences.
Web safe fonts
Voici 10 listes de police qui fonctionnent à peu près sur la plupart des systèmes.
Polices à empattements
font-family: Times, Times New Roman, Liberation Serif, FreeSerif, serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Georgia, DejaVu Serif, Norasi, serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Polices sans empattements
font-family: Arial, Helvetica, Liberation Sans, FreeSans, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, Luxi Sans, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Tahoma, Geneva, Kalimati, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Verdana, DejaVu Sans, Bitstream Vera Sans, Geneva, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Impact, Arial Black, sans-serif;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Polices à chasse fixe
font-family: Courier, Courier New, FreeMono, Liberation Mono, monospace;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
font-family: Monaco, DejaVu Sans Mono, Lucida Console, Andale Mono, monospace;A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9