Ce blog parlera de l'utilisation de la règle CSS @font-face.
Qu'est-ce que la règle CSS @font-face ?
La règle @font-face en CSS est utilisée pour créer des polices personnalisées pour nos projets. Ces polices peuvent être chargées à partir du serveur ou des polices installées sur le système.
Comment utiliser la règle CSS @font-face ?
La syntaxe pour utiliser la règle CSS @font-face est mentionnée ci-dessous :
@fontface {
famille de polices : MaNouvellePolice ;
src : URL ( )
}
La règle @font-face est définie en spécifiant une valeur dans la propriété font-family et l'URL associée à partir de laquelle se trouve cette police en tant qu'attribut src.
Exemple
Dans l'exemple ci-dessous, nous allons personnaliser les polices. Pour ce faire, commencez par télécharger les polices depuis le navigateur et ajoutez-les au dossier de votre projet. Vous pouvez également utiliser des liens si vous utilisez des polices du serveur.
Tout d'abord, ajoutez les balises
et , puis appliquez-les pour personnaliser les polices de chacune d'elles. Mettons en œuvre le scénario décrit ci-dessus en trois étapes.
Étape 1 : Ajouter des éléments au fichier HTML
Étape 1 : Ajouter des éléments au fichier HTML
En HTML, dans la section
, ajoutez et pour ajouter du contenu lié à la page Web :
< h2 > Bienvenue sur Linuxhint ! < / h2 >
< h1 > Bienvenue sur Linuxhint ! < / h1 >
Étape 2 : Spécifiez la règle @font-face dans CSS
< h2 > Bienvenue sur Linuxhint ! < / h2 >
< h1 > Bienvenue sur Linuxhint ! < / h1 >
Étape 2 : Spécifiez la règle @font-face dans CSS
Pour spécifier la règle, le mot-clé ' @fontface ” est utilisé dans CSS. À l'intérieur de ses accolades, ajoutez la propriété font-family et ajoutez le nom de la police comme valeur. Ensuite, utilisez la propriété src pour spécifier le chemin URL de la police téléchargée :
@fontface {
famille de polices : ma police ;
src : URL ( '/fonts/Batuphat\Script.otf' ) ;
}
De même, nous ajouterons un autre bloc de police personnalisé :
@fontface {famille de polices : mafont2 ;
src : URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Maintenant, appliquez le style aux éléments
et .
Élément de style h2
h2 {
famille de polices : ma police ;
taille de police : 50px ;
}
Élément de style h2
h2 {famille de polices : ma police ;
taille de police : 50px ;
}
Les propriétés appliquées à l'élément
sont expliquées ci-dessous :
- ' famille de polices ' est défini avec la valeur ' ma police ” c'est ce que nous avons déclaré dans la règle @font-face.
- ' taille de police ” La propriété définit la taille de la police à 50px.
Élément de style h1
h1 {
famille de polices : mafont2 ;
taille de police : 70px ;
Couleur : brun ;
}
Ici le ' Couleur ” La propriété est utilisée pour colorer la police.
On peut voir à partir de l'image fournie ci-dessous que les balises
et sont correctement stylées avec les polices nouvellement déclarées :
Nous avons fourni la méthode d'utilisation de la règle CSS @font-face.
Conclusion
Les styles de police jouent un rôle important pour rendre toute application attrayante sur le plan esthétique. Notre système a des styles de police limités, tandis qu'un développeur a besoin de différentes polices pour embellir ses applications Web. Pour ce faire, CSS nous permet d'utiliser la règle @font-face pour ajouter des polices personnalisées. Cet article a démontré la règle @font-face grâce à laquelle vous pouvez personnaliser le style de police dans notre application.