CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML 5 et CSS3 - Tutoriel vidéo avec un expert du Web

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

Retour à la formation
Chapitre 4 Leçon 10
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

À 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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d’avoir une connaissance de base en HTML et CSS.

Métiers concernés

Les compétences développées ici sont précieuses pour :

  • Développeurs Web
  • Designers UI/UX
  • Gestionnaires de contenu

Alternatives et ressources

Si vous cherchez d'autres méthodes, vous pouvez envisager :

  • Google Fonts pour une intégration de polices via des liens externes.
  • Adobe Fonts pour des options de police premium.

Questions & Réponses

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.
Font-Squirrel génère des fichiers aux formats .eot, .svg, .ttf et .woff pour une utilisation optimale avec @font-face.
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.