Mettre en forme un texte en CSS: choix et définition de la police par la propriété font-family

Le choix d'une familles de polices de caractères dans la conception de pages web qui s'appuie sur les feuilles de styles (CSS) est très important.
C'est la propriété CSS font-family qui permet de déterminer le ou les choix de la polices de caractères désirées pour l'ensemble de la page ou pour un élément donné.

Somaire

Choix de polices

HTML & CSS

Le problème c'est que, pour qu'une police s'affiche correctement, il faut que le visiteur l'a dans son système.
S'il ne l'a pas, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendez.
La propriété CSS qui indique la police au navigateur est font-family. .

font-family:police;

Pour éviter tout problème si l'internaute n'a pas la même police que vous, on met plusieurs noms de police, séparés par des virgules :

font-family:police1, police2, police3, police4;

Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il mettra la police2. Puis la police3 et ainsi de suite.
En général, on met en tout dernier une police standard (qui ne se met que si aucune autre police n'a été trouvée) c'est "serif".
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez donc utiliser sans crainte :

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Exemple:
Code : CSS


Sélectionner le code

	h1
	{
	   font-family: "Arial Black", Arial, Verdana, serif;
	}
	p
	{
	   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	}
	
 
Remarque : le choix d’un groupe de police doit suivre certaines règles :
1 – votre design ne pas se baser sur une seule police, il faut faire des testes avec chaque police du groupe que vous avez choisie et s’assurer que la mise en page n’explose pas complètement et que le contenu n’est pas caché ou recouverts les uns sous les autres.
L’astuce est de s’assurer que le contenant a une hauteur extensible, n’utiliser la propriété qui définie la hauteur que si nécessaire.
2 – Les polices choisies dans un groupe doivent être proches par leurs caractéristiques, deux polices différentes peuvent avoir des tailles et occupent un espace diffèrent pour la même valeur font-size. Donc mettre une police arial dans le même groupe que verdana est une erreur car verdana est plus haute et plus large.

Voici ci-dessous un ensemble de groupe qui ont été établis après plusieurs expériences :

Polices à chasse fixe (monospace)
font-family: "Courier New", Courier, monospace;
font-family: Monaco, "Lucida Console", "Andale Mono", monospace;

Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

Polices à empattements (serif)
font-family: "Times New Roman", Times, FreeSerif, serif;
font-family: Georgia, Norasi, serif;

Par carabde 10 mars 2014

chapitre précédent chapitre suivant