Accueil    CSS    Propriété @font-face
 



règle css @font-face  Règle CSS @font-face

«  Partie précédente  |  Index  |  Partie suivante  »


La règle CSS @font-face permet de faire référence dans les pages web à des polices typographiques spécifiques et de les employer pour la mise en forme des textes. Les polices peuvent être créées dans des fichiers de différents formats :
    - TrueType : ".ttf"
    - OpenType : ".otf"
    - Embedded OpenType : ".eot"
    - Web Open Font Format : ".woff"
    - Scalable Vector Graphic : ".svg"

La syntaxe permettant de déclarer et d'employer une référence vers une police de caractères spécifique et compatible avec les différents navigateurs est la suivante :



@font-face {
   font-family: '';
   src: url('FichierWebFont.eot');
   src: url('FichierWebFont.eot?#iefix') format('embedded-opentype'),
         url('FichierWebFont.woff') format('woff'),
         url('FichierWebFont.ttf') format('truetype'),
         url('FichierWebFont.svg#MonNomDePolice') format('svg');
}

.texte{
   font-family: '', verdana, serif;
}


Remarque : le site fontsquirrel propose de nombreuses polices avec l'ensemble des formats de fichiers présents.



Propriétés pour le style @font-face :




Propriété Définition Valeurs CSS
font-family Nom associé à la police importée par la règle @font-face qui sera utilisée pour faire référence à celle-ci Texte CSS 3
format Format du fichier .ttf, .otf,
.eot, woff,
.svg
CSS 3
src Lien vers le fichier décrivant la police de caractère URL CSS 3


Exemple d'utilisation de la règle css @font-face :




<style type="text/css">
@font-face {
   font-family: 'digital';
   src: url('DigitalFont.eot');
   src: url('DigitalFont.eot?#iefix') format('embedded-opentype'),
      url('DigitalFont.woff') format('woff'),
      url('DigitalFont.ttf') format('truetype'),
      url('DigitalFont.svg#digital') format('svg');
}

.texte{
   font-family: 'digital', verdana, serif;
}
</style>

<span class="texte">
   Exemple de texte avec une police appliquant un effet digital.
   9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 - 0
</span>



Texte avec une police appliquant un effet digital.

9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 - 0