La variante habituelle pour définir les polices ressemble à ceci à peu près :
body {
font-family: Arial, Helvetica, sans-serif;
}Ici, la police Arial est assignée à l'élément body. Si elle n'est pas disponible sur le système du spectateur, le navigateur se tournera vers Helvetica. Si Helvetica n'est pas disponible non plus, le navigateur sera instruit d'utiliser au moins une police sans empattement. Cela ne peut réellement être contrôlé. Vous n'avez donc pas un contrôle total sur le résultat final. Ce que vous avez si bien préparé dans GIMP ou Photoshop pourrait se perdre dans la jungle des polices. Cependant, nous verrons plus loin comment résoudre ce problème.
Revenons d'abord à la variante classique. Voici ci-dessous une définition typique qui ajuste l'apparence de base du site web. Avec la définition du body, vous pouvez d'abord définir les caractéristiques de base de la police.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Vous pouvez bien sûr personnaliser individuellement les différents éléments de la page. Cela inclut par exemple les en-têtes, les passages en italique, etc. Mais dans ce contexte, pensez de nouveau au principe d'héritage du CSS.
h1 {
font-size: 1.6em;
}Le résultat pourrait apparaître dans le navigateur de la manière suivante :
Utilisation de polices web
Le problème avec les définitions de police traditionnelles est évident : en définitive, vous ne pouvez pas être certain que la police que vous avez spécifiée est effectivement disponible chez le spectateur. En cas de non disponibilité, les navigateurs choisiront une police similaire à celle que vous avez demandée. Vous n'avez donc pas un contrôle réel sur le résultat. C'est à ce stade que @font-face intervient. Avec cette méthode, vous pouvez spécifier explicitement une police à utiliser. Cela fonctionne fondamentalement de la même manière que pour les images. Vous devez donc spécifier le chemin du fichier de la police.
Les navigateurs modernes utilisent les polices WOFF pour @font-face. Ces polices sont bien plus petites que les formats de polices web précédemment utilisés, tels que EOT et TTF.
Une définition typique de @font-face ressemble à ceci :
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Le nom de la police à utiliser est indiqué avec font-family. Jusqu'ici, il n'y a donc pas de particularités de syntaxe. Avec src:url(), vous indiquez l'URL où se trouve le fichier de la police. S'il est théoriquement possible que la police soit disponible sur les ordinateurs des utilisateurs, vous devriez en plus spécifier local. Vous attribuez le nom de la police à ce local.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Après la définition de @font-face, vous pouvez ensuite utiliser les polices web comme d'habitude.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Où trouver des polices web
La question se pose alors, d'où obtenir les fichiers de polices web concernés. Google héberge par exemple de nombreuses de ces polices web sur le site http://www.google.com/fonts.
Vous pouvez intégrer directement ces polices depuis ce site mentionné.
Un appel correspondant ressemblerait à ceci :
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Le webfont souhaité est spécifié derrière font-family. Les noms et appels correspondants sont disponibles sur le site Google mentionné. Une fois le webfont intégré, il peut être utilisé comme n'importe quelle autre police.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Vous pouvez également utiliser plusieurs polices web sur votre site. Pour cela, cliquez sur http://www.google.com/fonts sur les polices web souhaitées, puis sur Ajouter à la collection. Une fois toutes les polices web dans votre collection, accédez à Utiliser dans la partie inférieure de la page. Un genre de compteur sera affiché directement là-bas.
À travers cette illustration, vous pouvez voir les effets de l'intégration des polices web sur le temps de chargement de la page. Ces effets sont mesurables et augmentent avec chaque police web supplémentaire.
La simplicité d'utilisation de plusieurs polices web que vous avez précédemment ajoutées à votre collection est illustrée dans l'exemple suivant :
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Les différentes polices web sont donc notées séparément les unes après les autres en étant séparées par une barre verticale. L'appel complet correspondant à la collection choisie s'affiche sur la page Utilisation mentionnée ci-dessus.
De nombreuses polices web proposent des sous-ensembles tels que Latin ou Cyrillique. Pour les inclure de manière explicite, il suffit de spécifier le sous-ensemble souhaité en tant que valeur de paramètre.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Si plusieurs de ces sous-ensembles doivent être utilisés, ils doivent être notés séparés par des virgules.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Cependant, l'utilisation de cette police web est controversée pour une tout autre raison. Tout d'abord, une connexion à un serveur Google doit être établie lors du chargement de la page. On peut contourner cela en téléchargeant le fichier de police web et en le chargeant sur son propre serveur. Cependant, veillez dans tous les cas aux conditions d'utilisation des polices web que vous souhaitez utiliser de cette manière.
Définition de police de l'exemple de page
Voici les définitions de police que j'utiliserai pour la page d'exemple actuelle :
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Vous pouvez bien sûr ajouter des éléments supplémentaires. Dans le cas actuel, cette syntaxe est tout à fait suffisante.
