Souscrire
Blog iamvdo.mePropriétés: @font-face
Maj: septembre 2011
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-weight et font-stretch : pour les propriétés de la police.
Ce qui 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:bold;
}
