Exemple
Spécifiez une police nommée "myFirstFont" , et spécifier l'URL où il peut être trouvé:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Avec la règle @ font-face, concepteurs de sites Web ne doivent plus utiliser l' un des "web-safe" polices.
Dans la nouvelle règle @ font-face , vous devez d' abord définir un nom pour la police (eg myFirstFont) , puis pointez sur le fichier de police.
Astuce: Utilisez des lettres minuscules pour la police URL. Les lettres majuscules peuvent donner des résultats inattendus dans IE!
Pour utiliser la police pour un élément HTML, reportez - vous au nom de la police (myFirstFont) par la propriété font-family:
div
{
font-family: myFirstFont;
}support du navigateur
La règle @ font-face est prise en charge dans Internet Explorer, Firefox, Opera, Chrome et Safari.
Les chiffres dans le tableau indique la première version du navigateur qui prend en charge pleinement le format de police.
| Format de la police | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4.0 | 9.0 * | 3.5 | 3.1 | 10.0 |
| WOFF | 5.0 | 9.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36,0 | Non supporté | 35,0 * | Non supporté | 26,0 |
| SVG | 4.0 | Non supporté | Non supporté | 3.2 | 9.0 |
| EOT | Non supporté | 6.0 | Non supporté | Non supporté | Non supporté |
* Edge et IE: Le format de police ne fonctionne que lorsqu'il est réglé pour être "installable" .
* Firefox: Désactivé par défaut, mais peut être activé (nécessité de définir un indicateur pour "true" à utiliser WOFF2).
Syntaxe
@font-face
{
font-properties
}| descripteur de la police | Valeurs | La description |
|---|---|---|
| famille de polices | name | Champs obligatoires. Définit le nom de la police. |
| src | URL | Champs obligatoires. Définit l' URL(s) où la police doit être téléchargé à partir |
| font-stretch | normal condensée ultra-condensés extra-condensé Semi-condensés étendu Semi-expansées extra-expansée ultra-expansées | Optionnel. Définit comment la police doit être étirée. La valeur par défaut est "normal" |
| le style de police | normal italique oblique | Optionnel. Définit comment la police doit être de style. La valeur par défaut est "normal" |
| font-weight | normal audacieux 100 200 300 400 500 600 700 800 900 | Optionnel. Définit l'audace de la police. La valeur par défaut est "normal" |
| unicode-range | unicode-range | Optionnel. Définit la plage de caractères unicode la police prend en charge. La valeur par défaut est "U+0-10FFFF" |
Essayez-le vous-même - Exemples
Exemple
Vous devez ajouter une autre règle @ font-face contenant des descripteurs pour le texte en gras:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Essayez - le vous - même » Le fichier "sansation_bold.woff" est un autre fichier de police, qui contient les caractères gras pour la police Sansation.
Browsers utiliseront cette chaque fois qu'un morceau de texte avec la police-famille "myFirstFont" devrait rendre en gras.
De cette façon, vous pouvez avoir beaucoup de règles @ font-face pour la même police.
Pages associées
CSS3 tutoriel: CSS3 Fonts