CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 et CSS3 Intégration de Polices Personnalisées avec @font-face en CSS3

Intégration de Polices Personnalisées avec @font-face en CSS3

CSS3 : font-face
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML 5 et CSS3
Revoir le teaser Je m'abonne
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à l'utilisation de @font-face

Objectifs

À l’issue de cette vidéo, vous serez capable de :

  • Utiliser la propriété @font-face pour intégrer diverses polices.
  • Convertir et appliquer des polices dans différents formats (e.g., .ttf, .eot).
  • Assurer la compatibilité des polices à travers différents navigateurs.

Résumé

Découvrez comment utiliser la propriété @font-face de CSS3 pour intégrer des polices personnalisées sur votre site web.

Description

Une fonctionnalité essentielle de CSS3 est la propriété @font-face, qui permet d’incorporer des polices spécifiques dans une page web. Cette propriété est largement prise en charge par divers navigateurs. En général, la majorité des navigateurs acceptent le format de police .ttf, tandis qu’Internet Explorer utilise le format .eot. Il est donc nécessaire de doubler les règles de police pour inclure à la fois les formats .ttf et .eot. En outre, il est crucial de convertir les polices .ttf en .eot pour une compatibilité optimale. Des sites comme font-squirrel.com facilitent cette conversion.

Sur font-squirrel.com, on peut télécharger la police et générer un kit comprenant des fichiers au format .eot, .svg, .ttf, et .woff. Un exemple d’utilisation du fichier stylesheet.css fourni permet de découvrir la syntaxe du sélecteur @font-face. En modifiant les noms et les chemins de fichiers selon vos besoins, vous pouvez appliquer la nouvelle police à un élément HTML tel qu’un titre H1. Il est conseillé de vérifier que les fichiers de police sont correctement référencés par rapport à votre page HTML pour éviter des erreurs de chargement.

Il est important de noter que certaines polices peuvent être volumineuses, atteignant parfois plusieurs centaines de kilo-octets, ce qui peut ralentir le chargement des pages. Par conséquent, il est préférable d'utiliser ces polices pour des éléments de grande taille comme les titres, plutôt que pour des paragraphes complets.

Voir plus

Questions - réponses

Pourquoi est-il nécessaire de doubler les règles de police avec @font-face?
Il est nécessaire de doubler les règles de police pour inclure à la fois les formats .ttf et .eot afin d'assurer la compatibilité avec tous les navigateurs, y compris Internet Explorer.
Quels types de fichiers sont générés par Font-Squirrel pour @font-face?
Font-Squirrel génère des fichiers aux formats .eot, .svg, .ttf et .woff pour une utilisation optimale avec @font-face.
Quelles sont les limitations de l’utilisation des polices externes?
Les polices externes peuvent être volumineuses, entraînant un ralentissement significatif du chargement des pages, et nécessitent parfois plusieurs versions de la police (grasse, italique, etc.), augmentant davantage le temps de téléchargement.

Programme détaillé