OUJOOD.COM
Définition et utilisation da la propriété css @font-face
La propriété CSS @font-face permet aux développeurs de web de spécifier des polices personnalisées pour leur site web. Cela signifie que les visiteurs du site n'ont pas besoin d'avoir la police spécifiée installée sur leur ordinateur pour voir le contenu du site affiché avec la police souhaitée. Pour utiliser @font-face, il faut d'abord avoir la police souhaitée en format Web (généralement en .woff ou .woff2) et héberger le fichier sur le serveur web. Ensuite, vous pouvez utiliser la syntaxe suivante dans votre feuille de style CSS :La Syntaxe CSS @font-face
@font-face {
font-family: "NomDeLaPolice";
src: url("https://example.com/fonts/NomDeLaPolice.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
Ensuite, vous pouvez utiliser "NomDeLaPolice" dans la propriété font-family de n'importe quel élément de votre site pour lui appliquer la police personnalisée :
h1 {
font-family: "NomDeLaPolice", sans-serif;
}
Il est important de noter que la propriété @font-face doit être utilisée avec prudence, car elle peut avoir un impact sur les performances du site si les polices utilisées sont trop volumineuses. De plus, certaines polices ne sont pas disponibles sous licence pour être utilisées sur le web, il est donc important de vérifier les conditions d'utilisation de la police avant de l'utiliser sur un site web.Prise en charge de la propriété css dans les navigateurs
Les principaux navigateurs web, comme Google Chrome, Mozilla Firefox et Microsoft Edge, prennent en charge la propriété CSS @font-face. Cette propriété permet aux développeurs de définir des polices personnalisées qui peuvent être utilisées dans leurs designs de sites web. Cela leur permet d'utiliser des polices qui ne sont pas installées localement sur l'ordinateur des utilisateurs, mais qui sont chargées à partir d'un serveur distant. Cette propriété est largement prise en charge par les navigateurs modernes, ce qui en fait un moyen pratique pour les développeurs de personnaliser l'apparence de leurs sites web.Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Format de font |  |  |  |  |  |
|---|---|---|---|---|---|
| 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 supporté | Non supporté | Non supporté | 3.2 | Non supporté |
| EOT | 6.0 | Non supporté | Non supporté | Non supporté | Non supporté |