Blog iamvdo.meLa typographie s’invite sur le web
La règle @font-face permet au développeur web d’utiliser une police "éxotique", et ainsi de s’affranchir des polices uniquement disponibles sur l’environnement du client.
La syntaxe
@font-face{
<Description de la police>
}Décrire la police
Pour décrire la police utilisée, on utilise différents "descripteurs", tel que :
-
font-family: pour le nom de la police. -
src: pour le chemin de la police (URI). -
font-style,font-weightetfont-stretch: pour les propriétés de la police.
Ce qui nous donne :
@font-face{
font-family: "nomPolice";
src: url("polices/maPolice.ttf");
font-weight: bold;
}Et dans les navigateurs ?
Tous les navigateurs connaissent @font-face. Cependant, tous n’utilisent pas le même format de police. Voici un récapitulatif (non exhaustif) :
- Firefox : .ttf, .woff
- Chrome : .ttf, .woff, .svg
- Safari : .ttf, .svg
- Opéra : .ttf, .svg
- Internet Explorer : .eot
- iPhone,iPad : .svg
Il faut donc spécifier plusieurs sources, sachant qu’à partir du moment ou une police est trouvée, le navigateur ne cherche pas plus loin :
@font-face{
font-family: "nomPolice";
src: url("polices/maPolice.eot?"), /* pour IE */
url("polices/maPolice.woff"), /* pour Firefox, Chrome*/
url("polices/maPolice.ttf"), /* pour Safari et Opéra*/
url("polices/maPolice.svg"); /* pour iPhone, iPad */
font-weight: normal;
}Notez l’importance du point d’interrogation (?) après l’appel au format .eot, qui permet de ne pas faire planter IE. Le second format de la liste est woff car celui-ci est préconisé sur le web (format récent créé pour le web).
#1par Orkanta, le 10 novembre 2012
Bonjour,
Je suis actuellement en train d’apprendre à faire un site web html/css et je bloques sur l’utilisation de @font-face. Quelle est donc la syntaxe pour utiliser cette fonction ?
Dans l’exemple (font-family : "nompolice" ;), l’utilisation de guillemets est-elle obligatoire ?