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 la @font-facerègle CSS.
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.
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE : Le format de police ne fonctionne que lorsqu'il est défini comme "installable".
Utiliser la police que vous voulez
Dans la @font-facerè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 pour un élément HTML, reportez-vous au nom de la police (myFirstFont) via la font-familypropriété :
Exemple
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Utiliser du texte en gras
Vous devez ajouter une autre @font-facerègle contenant des descripteurs pour le texte en gras :
Exemple
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
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-facerè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 la @font-facerègle :
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |