Maison >interface Web >tutoriel CSS >Comment importer correctement des polices en CSS à l'aide de la règle @font-face ?

Comment importer correctement des polices en CSS à l'aide de la règle @font-face ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-03 10:55:03259parcourir

How to Properly Import Fonts in CSS using the @font-face Rule?

Importer des polices en CSS : une solution complète

En développement Web, il est souvent nécessaire d'utiliser des polices qui ne sont peut-être pas installées sur le client ordinateur. Pour y parvenir, CSS fournit la règle @font-face. Cependant, certains utilisateurs peuvent rencontrer des problèmes avec l'extrait de code fourni :

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

Pour résoudre ce problème, voici un extrait de code modifié qui définit correctement une police à l'aide de CSS :

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: 'EntezareZohoor2';
}</code>

Dans cet extrait, la règle @font-face est correctement définie avec les spécifications suivantes :

  • font-family : Le nom de la police à utiliser en CSS, dans ce cas 'EntezareZohoor2'.
  • src : source du fichier de police, y compris plusieurs formats pour différents navigateurs.
  • font-weight et font-style : propriétés facultatives qui définissent l'épaisseur et le style de la police.

De plus, l'élément newfont est défini pour utiliser la police 'EntezareZohoor2' en définissant sa propriété font-family. En suivant ces directives, les utilisateurs peuvent importer efficacement des polices en CSS et garantir un affichage correct sur les ordinateurs clients.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn