Polices web CSS
- Page précédente Effets de texte CSS
- Page suivante Transformations 2D CSS
Règle @font-face CSS
Les polices web permettent aux concepteurs web d'utiliser des polices qui ne sont pas installées sur l'ordinateur de l'utilisateur.
Une fois que vous avez trouvé / acheté la police que vous souhaitez utiliser, il suffit de l'inclure dans votre serveur web, elle sera téléchargée automatiquement par l'utilisateur au besoin.
Vos polices « propriétaires » dans CSS @font-face sont définis par des règles.
Différents formats de police
Polices TrueType (TTF)
TrueType est un format de police développé par Apple et Microsoft à la fin des années 1980. TrueType est le format de police le plus couramment utilisé sur les systèmes d'exploitation Mac OS et Microsoft Windows.
Polices OpenType (OTF)
OpenType est un format de police informatique scalable. Il est basé sur TrueType et est une marque déposée de Microsoft. Aujourd'hui, les polices OpenType sont largement utilisées sur les principaux systèmes d'exploitation informatiques.
Format de police ouvert Web (WOFF)
WOFF est un format de police utilisé pour les pages web. Il a été développé en 2009 et est devenu une norme recommandée par le W3C. WOFF est essentiellement un OpenType ou TrueType compressé avec d'autres métadonnées. Le but est de soutenir la distribution de polices de serveur à client sur des réseaux à bande passante limitée.
Format de police ouvert Web (WOFF 2.0)
Les formats TrueType/OpenType offrent une meilleure compression que WOFF 1.0.
Polices SVG/Forms
Les polices SVG permettent d'utiliser des SVG comme glyphs lors de l'affichage de texte. La norme SVG 1.1 définit un module de police qui permet de créer des polices dans les documents SVG. Vous pouvez également appliquer des CSS aux documents SVG, et la règle @font-face peut être appliquée au texte des documents SVG.
Police OpenType (EOT)
Les polices EOT sont une forme compacte des polices OpenType conçues par Microsoft, utilisées comme polices embarquées sur les pages web.
Support du navigateur pour le format de police
Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge pleinement ce format de police de caractères.
| format de police de caractères | |||||
| 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 pris en charge | Non pris en charge | Non pris en charge | 3.2 | Non pris en charge |
| EOT | 6.0 | Non pris en charge | Non pris en charge | Non pris en charge | Non pris en charge |
*IE :Ce format de police de caractères n'est valable que lorsqu'il est réglé sur "installable".
*Firefox :Par défaut, il n'est pas pris en charge, mais il peut être activé (le marqueur doit être réglé sur "true" pour utiliser WOFF2).
Utilisez la police de caractères dont vous avez besoin
Dans la règle @font-face : d'abord définir le nom de la police de caractères (par exemple myFirstFont), puis pointer vers le fichier de police de caractères.
astuce :L'URL de la police de caractères doit toujours être en minuscules. Les majuscules peuvent entraîner des résultats inattendus dans IE.
Pour utiliser la police de caractères pour un élément HTML, référez-vous au nom de la police de caractères via la propriété font-family (myFirstFont) :
exemple
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Utilisation du texte gras
Vous devez ajouter une autre règle @font-face qui contient les descripteurs de texte 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 de caractères contenant les caractères gras de la police Sansation.
Chaque fois qu'un paragraphe de texte avec la famille de polices "myFirstFont" doit être affiché en gras, le navigateur l'utilisera.
De cette manière, vous pouvez définir plusieurs @font-face règle.
description des polices de caractères CSS
Le tableau suivant liste les caractères qui peuvent être @font-face Tous les descripteurs de police de caractères (font descriptor) définis dans la règle :
| descripteur | valeur | description |
|---|---|---|
| font-family | name | nécessaire. Définir le nom de la police de caractères. |
| src | URL | nécessaire. Définir l'URL du fichier de police de caractères. |
| font-stretch |
|
Optionnel. Définir comment étirer la police. La valeur par défaut est "normal". |
| font-style |
|
Optionnel. Définir le style de la police. La valeur par défaut est "normal". |
| font-weight |
|
Optionnel. Définir la graisse de la police. La valeur par défaut est "normal". |
| unicode-range | unicode-range | Optionnel. Définir la plage de caractères UNICODE supportés par la police de caractères. La valeur par défaut est "U+0-10FFFF". |
- Page précédente Effets de texte CSS
- Page suivante Transformations 2D CSS
