Des polices de caractère spéciales avec CSS
Posté le Saturday 25 February 2012 | Catégories : CSS
Depuis sa version 3, CSS intègre la directive @font-face, qui permet d'utiliser directement des polices de caractère TTF ou OTF sur un site web. Ceci permet, par exemple, d'ajouter...
Un titre en police Gabrielle
Il suffit pour cela de modifier son fichier CSS:
@font-face {
font-family: "Gabrielle";
src: url("Gabrielle.ttf");
}
h1 {
font-family: Gabrielle;
}
Il ne reste donc plus qu'à trouver une belle police, sur dafont.com par exemple. Attention cependant que chaque police supplémentaire alourdi la page de 50KB environ. De plus, trop de polices différentes rendent la page plus difficile à lire...
Et le cache
Par défaut, le serveur web Apache ne reconnait pas les extensions .ttf et .otf. Il n'autorisera donc pas les navigateurs à mettre la police en cache. A chaque requête le navigateur devra à nouveau télécharger le même fichier.ttf, ce qui naturellement ralentit l'affichage des pages.
Pour activer la mise en cache, il faut d'abord modifier /etc/apache2/mods-enabled/mime.conf afin d'associer les extensions .ttf et .otf au type MIME application/octet-stream:
AddType application/octet-stream .ttf
AddType application/octet-stream .otf
Dans le fichier .htaccess du site web, il faut ensuite autoriser la mise en cache des fichiers du type application/octet-stream, pour une semaine par exemple (604800 secondes).
ExpiresByType application/octet-stream "access plus 604800 seconds"
Finalement, toujours dans le fichier .htaccess, on peut autoriser les éventuels proxy's à également mettre en cache le fichier:
<FilesMatch "\.(ttf|otf)$">
Header append Cache-Control "public"
</FilesMatch>
