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 la police fichier sur votre serveur Web, et il sera automatiquement téléchargé pour l'utilisateur en cas de besoin.
Vos "propres" polices sont définies dans la règle CSS @font-face
.
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 Mac OS et Microsoft. Systèmes d'exploitation 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 principaux plates-formes informatiques.
Le format de police Web ouvert (WOFF)
WOFF est un format de police à utiliser 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 qui offre une meilleure compression que WOFF 1.0.
Polices/formes SVG
Les polices SVG permettent d'utiliser SVG comme glyphes lors de l'affichage du texte. Le SVG 1.1 spécification définit un module de polices 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é 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 dans les pages Web.
Les nombres dans le tableau spécifient 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 pour être "installable".
Dans la règle @font-face
; 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, faites référence au nom de la police (myFirstFont) via la propriété font-family
:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>
</body>
</html>
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 →
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The @font-face Rule</h1>
<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>
</body>
</html>
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" doit être affiché en gras.
De cette façon, vous pouvez avoir plusieurs règles @font-face
pour la même police.
Le tableau suivant répertorie tous les descripteurs de polices pouvant être définis dans la règle @font-face
:
Descripteur :
font-family
Valeurs :
name
Description :
Requis. Définit un nom pour la police
Descripteur :
src
Valeurs :
URL
Description :
Requis. Définit l'URL du fichier de police
Descripteur :
font-stretch
Valeurs :
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Description :
Facultatif. Définit comment la police doit être étirée. La valeur par défaut est "normal"
Descripteur :
font-style
Valeurs :
normal
italic
oblique
Description :
Facultatif. Définit le style de la police. La valeur par défaut est "normal"
Descripteur :
font-weight
Valeurs :
normal
bold
100
200
300
400
500
600
700
800
900
Description :
Facultatif. Définit l'audace de la police. La valeur par défaut est "normal"
Descripteur :
unicode-range
Valeurs :
unicode-range
Description :
Facultatif. Définit la plage de caractères UNICODE prise en charge par la police. La valeur par défaut est "U+0-10FFFF".