CSS3 Web Fonts - Le @font-face Règle
polices Web permettent aux concepteurs Web d'utiliser des polices qui ne sont pas installées sur l'ordinateur de l'utilisateur.
Lorsque vous avez trouvé / acheté la police que vous souhaitez utiliser, il suffit d'inclure le fichier de police sur votre serveur web, et il sera automatiquement téléchargé à l'utilisateur en cas de besoin.
Vos polices «propres» sont définis dans le CSS3 @font-face règle.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Différents formats de polices
TrueType Fonts (TTF)
TrueType est une norme de police développé à la fin des années 1980, par Apple et Microsoft. TrueType est le format de police le plus courant pour les systèmes d' exploitation Mac OS et Microsoft Windows.
OpenType Fonts (OTF)
OpenType est un format pour les polices informatiques évolutives. Il a été construit sur TrueType et est une marque déposée de Microsoft. OpenType polices sont utilisées couramment aujourd'hui sur les principales plates - formes informatiques.
Le Web Open Font Format (WOFF)
WOFF est un format de police pour une utilisation dans des pages web. Il a été développé en 2009, et est maintenant une recommandation du W3C. WOFF est essentiellement OpenType ou TrueType avec compression et des métadonnées supplémentaires. L'objectif est de soutenir la distribution font à partir d'un serveur à un client sur un réseau avec des contraintes de bande passante.
Le Web Open Font Format (WOFF 2.0)
TrueType/OpenType police qui offre une meilleure compression que WOFF 1.0.
SVG Fonts / Formes
polices SVG permettent SVG à utiliser comme glyphes lors de l'affichage du texte. La spécification SVG 1.1 définir un module de police qui permet la création de polices dans un document SVG. Vous pouvez également appliquer CSS aux documents SVG, et @font-face règle peut être appliquée au texte dans les documents SVG.
Embarqués OpenType Fonts (EOT)
Les polices EOT sont une forme compacte de OpenType polices conçues par Microsoft pour une utilisation en tant que polices intégrées sur les pages Web.
Browser Support pour les formats de polices
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 | 9.0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Non supporté | 36,0 | 35,0 * | Non supporté | 26,0 |
| SVG | Non supporté | 4.0 | Non supporté | 3.2 | 9.0 |
| EOT | 6.0 | Non supporté | Non supporté | Non supporté | Non supporté |
* IE: Le format de police ne fonctionne que lorsqu'il est réglé pour être "installable".
* Firefox: Non pris en charge par défaut, mais peut être activée (besoin de mettre un drapeau à "true" à utiliser WOFF2).
Utilisation de la police que vous voulez
Dans le CSS3 @font-face règle générale , vous devez d' abord définir un nom pour la police (par exemple myFirstFont ), puis pointez sur le fichier de police.
 | Astuce: Toujours utiliser 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 ) à travers le font-family propriété:
Exemple
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Essayez - le vous - même » Utilisation de Text Bold
Vous devez ajouter une autre @font-face règle contenant des descripteurs pour le texte en gras:
Exemple
@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 @font-face des règles pour la même police.
Testez-vous avec des exercices!
CSS3 Font Descripteurs
Le tableau suivant répertorie tous les descripteurs de police qui peuvent être définies à l' intérieur du @font-face règle:
| Descriptor | Valeurs | La description |
|---|---|---|
| font-family | name | Obligatoire. Définit un nom pour la police |
| src | URL | Obligatoire. Définit l'URL du fichier de police |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optionnel. Définit comment la police doit être étirée. Par défaut est "normal" |
| font-style | normal italic oblique | Optionnel. Définit comment la police doit être de style. Par défaut est "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optionnel. Définit l'audace de la police. Par défaut est "normal" |
| unicode-range | unicode-range | Optionnel. Définit la plage de caractères UNICODE la police prend en charge. Par défaut est "U + 0-10FFFF" |