Règles CSS3 @font-faceRules
Exemple
Spécifiez une police nommée "myFirstFont", et spécifiez l'URL où elle peut être trouvée :
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Essayez-le vous-même »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge les règles @font-face.
Cependant, Internet Explorer 9 ne prend en charge que les polices de type .eot, tandis que Firefox, Chrome, Safari et Opera prennent en charge à la fois les types de police .ttf et .otf.
Remarque :Internet Explorer 8 et les versions IE antérieures ne prennent pas en charge la règle @font-face.
Définition de la propriété et instructions d'utilisation
La règle @font-face, l'une des règles grâce auxquelles les web designers n'ont plus à utiliser de polices "web-safe".
Le nom de la police, règle @font-face :
- font-family: myFirstFont;
Le fichier de police se trouve quelque part sur votre serveur, référez-vous au CSS :
- src: url('Sansation_Light.ttf')
Si le fichier de police se trouve dans un autre emplacement, utilisez l'URL complète :
- src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
Maintenant, la police est prête à être utilisée. Voici un exemple d'utilisation sur tous les éléments div :
{
font-family: myFirstFont;
}
Syntaxe :
-
@font-face
{
font-properties
}
L'exemple suivant est une police utilisée dans un div :
{
font-family: myFirstFont;
}
Syntaxe
{
font-properties
}
| Description de la police | Valeur | Description |
|---|---|---|
| font-family | name | Obligatoire. Définit le nom de la police. |
| src | URL | Obligatoire. Définit la ou les URL à partir desquelles la police est téléchargée. |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Facultatif. Définit comment la police doit être étirée. La valeur par défaut est "normal" |
| font-style | normal italic oblique |
Facultatif. Définit le style que la police doit avoir. La valeur par défaut est "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Facultatif. Définit la graisse de la police. La valeur par défaut est "normal" |
| unicode-range | unicode-range | Facultatif. Définit la plage de caractères Unicode pris en charge par la police. La valeur par défaut est "U+0-10FFFF" |
Articles connexes
Tutoriel CSS3 :Polices CSS3
autres extensions