Règle @font-face CSS
Définition et utilisation
En utilisant la règle @font-face, les concepteurs Web n'ont plus besoin d'utiliser une police "sécurisée".
Dans la règle @font-face, vous devez d'abord définir le nom de la police (par exemple myFirstFont) puis pointer vers le fichier de police.
Astuce :L'URL de la police doit être en minuscules. Les majuscules peuvent entraîner des résultats inattendus dans IE !
Pour utiliser la police de caractères dans un élément HTML, utilisez le nom de la police via la propriété font-family (myFirstFont) :
div {
font-family: myFirstFont;
}
Veuillez également consulter :
Tutoriel CSS :Polices Web CSS
Exemple
Définir une police nommée "myFirstFont" et indiquer l'URL où la trouver :
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Vous pouvez trouver plus d'exemples TIY en bas de la page.
Syntaxe CSS
@font-face {
font-properties
}
| Description de la police de caractères | Valeur | Description |
|---|---|---|
| font-family | name | Obligatoire. Définir le nom de la police de caractères. |
| src | URL | Obligatoire. Définir l'URL de téléchargement de la 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 finesse de la police. La valeur par défaut est "normal". |
| unicode-range | unicode-range | Optionnel. Définir la plage de caractères Unicode pris en charge par la police. La valeur par défaut est "U+0-10FFFF". |
Plus d'exemples
Exemple
Vous devez ajouter une autre règle @font-face contenant les descripteurs de texte gras :
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Le fichier "sansation_bold.woff" est un autre fichier de police, contenant des caractères gras de la police Sansation.
Chaque fois que le texte d'une section de la famille de police "myFirstFont" doit être affiché en gras, le navigateur l'utilise.
De cette manière, vous pouvez définir plusieurs règles @font-face pour la même police.
Prise en charge du navigateur
Internet Explorer, Firefox, Opera, Chrome et Safari prennent en charge la règle @font-face.
Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge pleinement 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 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 |
* Edge et IE : le format de police n'est valable que lorsque configuré sur "installable".
* Firefox : désactivé par défaut, mais peut être activé (le flag doit être réglé sur "true" pour utiliser WOFF2).
