CSS Polices Personnalisées
La Règle CSS @font-face
La règle CSS @font-face vous permet de définir et de charger des polices personnalisées pour une utilisation sur une page web.
La police n'a pas besoin d'être installée sur l'ordinateur de l'utilisateur.
Lorsque vous avez trouvé ou acheté la police que vous souhaitez utiliser, il vous suffit d'inclure le fichier de police sur votre serveur web, et il sera automatiquement téléchargé par l'utilisateur lorsque nécessaire.
Formats de Police Courants
Les formats de police les plus utilisés sont WOFF/WOFF2 pour les pages web et TTF/OTF pour les ordinateurs de bureau.
WOFF/WOFF2 (Web Open Font Format)
WOFF/WOFF2 sont optimisés pour réduire la taille des fichiers et constituent le format de police idéal pour une utilisation sur les pages web. Il a été développé en 2009 et est maintenant une recommandation du W3C. WOFF/WOFF2 sont pris en charge par tous les principaux navigateurs.
TTF (Polices TrueType) et OTF (Polices OpenType)
TTF a été développé à la fin des années 1980 par Apple. OTF a été développé par Apple et Microsoft. TTF est le format de police le plus courant pour les systèmes d'exploitation Mac OS et Microsoft Windows. OTF est basé sur TTF, en tant que format plus avancé et évolutif qui prend en charge des fonctionnalités de composition typographique riches. Les deux types sont populaires en raison de leur accessibilité et de leur qualité, mais ils ne sont pas optimisés pour une utilisation sur le web.
Utilisez Votre Police Personnalisée
Dans la règle @font-face , spécifiez d'abord un nom pour la police personnalisée (par exemple, "myFont") dans le descripteur font-family, puis pointez vers le fichier de police dans le descripteur src.
Ensuite, pour utiliser la police personnalisée dans un élément HTML, faites référence au nom de la police ("myFont") via la propriété font-family :
Exemple
@font-face {
font-family: myFont; /* définir le nom */
src: url(sansation_light.woff); /* url de la police */
}
p {
font-family: myFont; /* utiliser la police */
} Police Personnalisée Grasse
Vous devez ajouter une autre règle @font-face contenant des descripteurs pour le texte en gras :
Exemple
@font-face {
font-family: myFont;
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 pour la police Sansation.
Les navigateurs utiliseront ce fichier chaque fois qu'un morceau de texte avec la police "myFont" doit être rendu en gras.
Astuce : De cette façon, vous pouvez avoir plusieurs règles @font-face pour la même police.
Descripteurs CSS @font-face
Le tableau suivant répertorie les descripteurs de police qui peuvent être définis à l'intérieur de la règle @font-face :
| Descripteur | Description |
|---|---|
| font-family | Requis. Définit un nom pour la police |
| src | Requis. Définit l'URL du fichier de police |
| font-stretch | Optionnel. Définit comment la police doit être étirée. Par défaut, c'est "normal" |
| font-style | Optionnel. Définit comment la police doit être stylisée. Par défaut, c'est "normal" |
| font-weight | Optionnel. Définit le poids de la police. Par défaut, c'est "normal" |
| font-display | Optionnel. Définit comment la police se charge et s'affiche. Par défaut, c'est "auto" |
| unicode-range | Optionnel. Définit la plage de caractères UNICODE que la police prend en charge. Par défaut, c'est "U+0-10FFFF" |