Comment utiliser des polices Web externes dans CSS
Si vous souhaitez ajouter une police sur votre site Web qui n'est pas présent sur l'ordinateur de l'utilisateur par défaut, vous pouvez utiliser la règle CSS @ Font-Face pour le faire. La règle @ FONT-FACE Spécifie que vous devez d'abord fournir un certain nom à la police personnalisée et ensuite pointer ensuite le fichier de police. Dans cet article, vous établirez une compréhension de la façon d'utiliser des polices Web externes dans CSS. Ce tutoriel couvre les sujets suivants.
- Formats de police
- Comment ajouter des polices Web externes à l'aide de CSS
- Formats de police et soutien de leur navigateur.
Commençons.
Formats de police
Avant de plonger dans les détails de la façon d'ajouter des polices Web externes, nous devons d'abord établir une compréhension de base des différents formats de police que nous avons expliqués en détail ci-dessous.
Polices truetype
Les polices TrueType ou TTF sont un format de police standard fondé par Microsoft et Apple à la fin des années 80, il est donc compatible avec les deux systèmes d'exploitation. Il est très adapté à l'élargissement de la prise en charge des anciens navigateurs, en particulier sur les smartphones.
Polices OpenType
Les polices OpenType ou OTF sont un format de police inventé par Microsoft sur les mêmes modèles que celui des polices TrueType. Ce format est largement utilisé sur la plupart des systèmes informatiques.
Format de police ouverte Web
Le format de police Woff est originaire en 2009 en tant que format couvrant à la fois les formats TTF et OTF. Ce format compacte les fichiers et est compatible avec tous les navigateurs modernes. Il a deux versions, la seconde est appelée Woff 2.0 et compacte les fichiers d'une manière mieux que l'ancienne version.
Polices à openype intégrées
Les polices OpenType embarquées, plus communément appelées EOT est un format qui est une compression d'OTF développée par Microsoft. Ce format est utilisé comme polices intégrées sur les sites Web.
Polices SVG
Un format de polices SVG permet d'afficher SVG sous la forme de graphiques vectoriels. Cela signifie que divers personnages seront affichés en différentes couleurs ou animations.
Maintenant que nous avons appris les différents formats de police, considérons les étapes ci-dessous pour comprendre toute la procédure d'ajout de polices externes à votre site Web.
Comment ajouter des polices Web externes à l'aide de CSS
Ci-dessous, nous vous avons fourni un guide étape par étape sur la façon dont vous pouvez ajouter des polices externes à l'aide de CSS.
Étape 1: Télécharger les polices personnalisées
La première étape serait de télécharger vos polices souhaitées dans le format de polices TrueType (.ttf) ou le format des polices OpenType (.oft) de tout référentiel de police. Par exemple, nous téléchargeons ici les polices de «script de danse» de Google Fonts.
Cliquez sur la «famille de téléchargement» pour télécharger des polices personnalisées.
Étape 2: Extraire les fichiers du dossier zip
Une fois téléchargé, extraire les fichiers du dossier zip.
Les polices sont dans le .format TTF. Sélectionnez maintenant l'une de ces polices qui appartiennent à la famille des polices «script de danse».
Note: Assurez-vous que vos fichiers téléchargés sont présents dans le même dossier que le fichier Web.
Le fichier de police est présent dans le même dossier exactement que le fichier Web.
Étape 3: Ajoutez des polices dans votre fichier CSS
À vos polices externes dans votre fichier CSS, utilisez la règle @ FONT-FACE. La règle @ Font-Face Spécifie que d'abord, vous devez fournir un certain nom à la police personnalisée et ensuite pointer le fichier de police en donnant l'URL à l'attribut SRC.
Nous avons attribué le nom «Customfonts» à la Font-Family, puis nous avons fourni l'URL du fichier de police à l'attribut SRC. Enfin, nous attribuons la famille des polices à notre cap et lui donnons de la couleur.
Étape 4: liez votre fichier CSS au fichier html
Et enfin, ajoutez votre feuille de style à votre fichier html.
Nous relions à l'extérieur notre fichier CSS au fichier HTML.
Sortir
Une police Web personnalisée externe a été ajoutée.
Formats de police et soutien de leur navigateur
Le tableau ci-dessous montre tous les formats de police et leur support de navigateur pertinent.
| Format de police | Microsoft Edge | Google Chrome | Incendier | Safari | Opéra |
|---|---|---|---|---|---|
| TTF | 9.0 | 4.0 | 3.5 | 3.1 | dix.0 |
| OTF | 9.0 | 4.0 | 3.5 | 3.1 | dix.0 |
| Woff | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| Woff2 | 14.0 | 36.0 | 39.0 | dix.0 | 26.0 |
| Eot | 6.0 | Non supporté | Non supporté | Non supporté | Non supporté |
| SVG | Non supporté | Non supporté | Non supporté | 3.2 | Non supporté |
Conclusion
Pour utiliser des polices externes dans CSS, téléchargez les polices souhaitées à partir de n'importe quel référentiel de police et ajoutez-les dans le fichier CSS à l'aide de la règle @ font-face qui spécifie un certain nom à la police personnalisée et pointez le fichier de police en donnant l'URL au SRC attribut. Ce tutoriel est conçu pour expliquer l'utilisation de différents formats de police et comment les polices Web externes peuvent être utilisées dans CSS.