oujood.com

Utiliser la règle CSS @font-face pour ajouter des polices personnalisées à votre site web

Avec la règle @font-face, les concepteurs de sites Web ne sont plus obligés d'utiliser l'une des polices sûres pour le Web.
Dans la règle @font-face, vous devez d'abord définir un nom pour la police (par exemple, myFirstFont), puis pointer vers le fichier de la police.
Pour utiliser la police dans un élément HTML, il faut faire référence au nom de la police (myFirstFont) par le biais de la propriété font-family

chercher |

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 fontGoogle ChromeInternet ExplorerFirefoxSafariOpera
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é



Voir aussi nos tutoriel :

les cookies

Les cookies : Définition et utilisation des cookies en javascript.

liste des fonctions GD

liste des fonctions GD

border-style

Définit le style des quatre frontières