Règles CSS3 @ font-face
Exemples
Spécifiez une police nommée "myFirstFont", et indiquer où trouver son URL:
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * IE9 * /
}
Essayez »
support du navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari soutien règle @ font-face.
Toutefois, Internet Explorer 9 ne supporte que .eot types de polices, Firefox, Chrome, Safari, Opera et le soutien .ttf et .otf deux types de polices.
Remarque: Internet Explorer 8 et les versions antérieures de IE ne supportent pas une règle @ font-face.
Définition des attributs et des instructions
@ Règle Font-face, les concepteurs Web ont plus à utiliser les polices d'un "web-safe".
Nom de la police, police - règles de visage:
- font-family: myFirstFont;
Les fichiers de polices contenues sur votre serveur quelque part, CSS de référence:
- src: url ( 'Sansation_Light.ttf')
Si le fichier de police est dans un endroit différent, utilisez l'URL complète:
- src: url ( '../../ www.w3cschool.css / css3 / Sansation_Light.ttf')
Est maintenant prêt à utiliser la police, ce qui suit est un exemple de la façon d'utiliser tout l'élément div:
{
font-family: myFirstFont;
}
Syntaxe:
- @ Font-face
{
propriétésdepolice
}
Les exemples suivants de polices utilisées dans un div:
{
font-family: myFirstFont;
}
grammaire
{
propriétésdepolice
}
| Description de la police | valeur | explication |
|---|---|---|
| font-family | nom | Obligatoire. Définir le nom de la police. |
| src | URL | Obligatoire. Définir le téléchargement de polices URL (S) |
| 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éfinir comment la police doit être étirée. La valeur par défaut est "normal" |
| font-style | normal italique oblique | Optionnel. Définir le style de police devrait être. La valeur par défaut est "normal" |
| font-weight | normal audacieux 100 200 300 400 500 600 700 800 900 | Optionnel. Un poids de police personnalisée. La valeur par défaut est "normal" |
| unicode-range | unicode-range | Optionnel. La gamme est définie polices prennent en charge les caractères Unicode. La valeur par défaut est "u + 0-10 FFFF" |
articles connexes
CSS3 tutoriel: CSS3 Fonts