CSS Police

Pour qu'une police s'affiche correctement, il faut que le navigateur "connaisse" cette police, sinon, le navigateur prendra une police par défaut (une police standard).

Depuis CSS 3, il est possible de faire télécharger automatiquement une police au navigateur.

Modifier la police utilisée par le navigateur

Dans l'exemple ci-dessous, la police utilisée par le navigateur sera verdana pour tout le contenu de la page. Mais si le navigateur ne possède pas la police verdana, il utilisera Trebuchet MS. Et s'il ne possède pas Trebuchet MS, il utilisera sans-serif. Et s'il ne possède pas sans-serif, il utilisera sa police par défaut.

REMARQUE : si le nom de la police comporte des espaces, il faut mettre le nom de la police entre " "

<!DOCTYPE html>

<html>

<head>

	<style>
	
		body {
			font-family : verdana,"Trebutchet MS", sans-serif ;  
		}

	</style>
</head>

<body>
	...
</body>

</html>

Polices courantes utilisées par les navigateurs

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

Utiliser une police "exotique"

C'est possible depuis le CSS 3. Mais, il y a des contraintes:

Le navigateur du client doit télécharger automatiquement le fichier de la police
La majorité des polices sont soumises au droit d'auteur, il n'est donc pas légal de les utiliser sur son site.
Il existe plusieurs formats de fichiers de polices et ceux-ci ne fonctionnent pas sur tous les navigateurs.
- .ttf: TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
- .eot: Embedded OpenType. Fonctionne sur IE uniquement. Ce format est propriétaire, produit par Microsoft.
- .otf: OpenType Font. Ne fonctionne pas sur IE.
- .svg: SVG Font. Format reconnu sur les iPhones et iPads
- .woff: Web Open Font Format. Nouveau format conçu pour le Web, qui fonctionne sur IE9 et tous les autres navigateurs.

Exemple :

<!DOCTYPE html>
<html>
<head>

<style>
	
	/* définition d'un police nommée souvenir */
	@font-face {
		font-family : 'souvenir' ;
		src : url('ec.ttf') format('truetype') ;
		src : url('ec.eot') format('eot') ;
		src : url('ec.svg') format('svg') ;
	}

	/* définition d'un police nommée mechanic */
	@font-face {
		font-family : 'mechanic' ;
		src : url('Mechanic.ttf') format('truetype') ;
	}

	/* utilisation de la police perso pour les titres de niveau 1 et 2 */
	h1 {
		font-family : 'souvenir', Arial, Serif ; 
		font-size: 48px;
	}
	h2 {
		font-family : 'mechanic', Arial, Serif ; 
		font-size: 36px;
	}
</style>
</head>

<body>
	<h1>Souvenirs, souvenirs...</h1>
	<h2>Une autre police</h2>
</body>
</html>

Voir