Polices Web CSS
La règle CSS @font-face
Les 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, incluez simplement le fichier de police sur votre serveur Web, et il sera automatiquement téléchargé à l’utilisateur en cas de besoin.
Vos « propres » polices sont définies dans le CSS @font-face règle.
Différents formats de police
Polices TrueType (TTF)
TrueType est une norme de police développée à 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.
Polices OpenType (OTF)
OpenType est un format de polices informatiques évolutives. Il a été construit sur TrueType et est une marque déposée de Microsoft. Les polices OpenType sont couramment utilisées aujourd’hui sur les principales plates-formes informatiques.
Le format de police Web ouvert (WOFF)
WOFF est un format de police utilisé dans les 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 métadonnées supplémentaires. L’objectif est de prendre en charge la distribution des polices d’un serveur à un client sur un réseau avec des contraintes de bande passante.
Le format de police Web ouvert (WOFF 2.0)
Police TrueType/OpenType offrant une meilleure compression que WOFF 1.0.
Polices/Formes SVG
Les polices SVG permettent d’utiliser SVG comme glyphes lors de l’affichage de texte. La spécification SVG 1.1 définit un module de police qui permet la création de polices dans un document SVG. Vous pouvez également appliquer CSS aux documents SVG, et la règle @font-face peut être appliquée au texte des documents SVG.
Polices OpenType intégrées (EOT)
Les polices EOT sont une forme compacte de polices OpenType conçues par Microsoft pour être utilisées comme polices intégrées sur les pages Web.
Prise en charge des navigateurs pour les formats de police
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge le format de police.
| Format de 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 | 14.0 | 36,0 | 39,0 | 10.0 | 26,0 |
| SVG | Non supporté | Non supporté | Non supporté | 3.2 | Non supporté |
| EOT | 6.0 | Non supporté | Non supporté | Non supporté | Non supporté |
*IE : Le format de police ne fonctionne que lorsqu’il est défini comme « installable ».
Utiliser la police que vous voulez
Dans le @font-face règle; définissez d’abord un nom pour la police (par exemple myFirstFont) puis pointez sur le fichier de police.
Conseil: Utilisez toujours des lettres minuscules pour l’URL de la police. Les lettres majuscules peuvent donner des résultats inattendus dans IE.
Pour utiliser la police d’un élément HTML, reportez-vous au nom de la police (myFirstFont) via le font-family propriété:
Exemple
@ font-face {
famille de polices : myFirstFont ;
src : url(sansation_light.woff);
}
div {
famille de polices : myFirstFont ;
}
Essayez-le vous-même »
Utiliser du texte en gras
Vous devez ajouter un autre @font-face règle contenant des descripteurs pour le texte en gras :
Exemple
@ font-face {
famille de polices : myFirstFont ;
src : url(sansation_bold.woff);
font-weight : gras ;
}
Essayez-le vous-même »
Le fichier « sansation_bold.woff » est un autre fichier de police, qui contient les caractères gras de la police Sansation.
Les navigateurs l’utiliseront chaque fois qu’un morceau de texte avec la famille de polices « myFirstFont » devrait s’afficher en gras.
De cette façon, vous pouvez avoir plusieurs @font-face règles pour la même police.
Descripteurs de polices CSS
Le tableau suivant répertorie tous les descripteurs de polices pouvant être définis dans le @font-face règle:
| Descripteur | Valeurs | Description |
|---|---|---|
| famille de polices | nom | Requis. Définit un nom pour la police |
| src | URL | Requis. Définit l’URL du fichier de police |
| font-stretch | normal condensé ultra-condensé extra-condensé semi-condensé étendu semi-expansé extra-expansé ultra-expansé |
Facultatif. Définit comment la police doit être étirée. La valeur par défaut est « normale » |
| le style de police | normal italique oblique |
Facultatif. Définit comment la police doit être stylisée. La valeur par défaut est « normale » |
| poids de la police | normal gras 100 200 300 400 500 600 700 800 900 |
Facultatif. Définit l’audace de la police. La valeur par défaut est « normale » |
| plage unicode | plage unicode | Facultatif. Définit la plage de caractères UNICODE pris en charge par la police. La valeur par défaut est « U+0-10FFFF » |
#Polices #Web #CSS