Polices personnalisées CSS3 colorées

Lors de la création de pages, nous utilisons souvent "font-family" pour définir les polices. Cependant, la possibilité de rendre les polices que nous définissons à l'aide de "font-family" dans le navigateur de l'utilisateur dépend de l'ordinateur de l'utilisateur. . Si les polices que nous avons définies y sont installées. Sur Internet, nous pouvons souvent constater que certains sites Web étrangers utilisent des polices inhabituelles et belles, et ces polices ne sont généralement pas installées sur les ordinateurs des utilisateurs. Nous allons donc aujourd'hui vous présenter comment les utiliser sur la page. l'ordinateur de l'utilisateur.

css3 @font-face

Il est en fait inexact de dire que @font-face est un nouvel attribut de CSS3, car cette fonctionnalité est déjà prise en charge dans CSS2 et IE5 a déjà commencé à prend en charge, mais la façon dont il est implémenté dans IE se fait via le format de police eot. Malheureusement, les autres navigateurs ne prennent pas en charge ce format.

Dans les pages Web, nous pouvons utiliser l'attribut font-family de CSS pour définir les polices. Cependant, le fait que la police définie puisse être affichée correctement sur l'ordinateur de l'utilisateur dépend de l'ordinateur de l'utilisateur. a-t-il installé la police. Nous voyons souvent que certains sites Web personnels étrangers utilisent de très belles polices, mais ces polices ne sont généralement pas installées sur l'ordinateur de l'utilisateur, cela ne peut donc pas être réalisé en utilisant l'attribut font-family. Aujourd'hui, nous allons introduire l'utilisation des implémentations @font-face personnalisées. polices.

CSS3 @font-face

Il n'est pas exact de dire que @font-face est une nouvelle fonctionnalité de CSS3, car CSS2 prend déjà en charge cette fonctionnalité . Et Internet Explorer le prend en charge dès la version 5, mais IE l'implémente via son propre format de police eot (Embeded Open Type), et les autres navigateurs ne prennent pas en charge ce format. @font-face prend en charge les attributs suivants :

Font-family : Définissez le nom de la police du texte.
　font-style : Définir le style du texte.
　font-variant : Définissez si le texte est en majuscule ou en minuscule.
　font-weight : Définissez l'épaisseur du texte.
　font-stretch : Définissez si le texte est étiré horizontalement.
　font-size : Définissez la taille de la police du texte.
　src : Définissez le chemin relatif ou le chemin absolu de la police personnalisée.
La compatibilité du navigateur @font-face est la suivante :

Un exemple simple

Déclarez d'abord un nom Pour la police de ChantelliAntiquaRegular, il existe une ancienne façon de l'écrire comme ceci :

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
    src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
    font-weight: normal;
    font-style: normal;
}

La première src est compatible avec IE, et la seconde src est compatible avec d'autres navigateurs. local("☺") est une méthode d'écriture hackée pour éviter de charger des polices depuis le client. Cette méthode d'écriture a un BUG dans le système Android. La solution d'amélioration consiste à déclarer deux @font-face, comme suit :

.

@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url("Chantelli_Antiqua-webfont.eot");
}
 
@font-face {
    font-family: "ChantelliAntiquaRegular";
    src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
    font-weight: normal;
    font-style: normal;
}

Nous déclarons d'abord une @font-face qui fait référence au fichier de police eot pour garantir qu'il peut fonctionner correctement dans IE. La seconde @font-face fait référence à plusieurs formats de police pour des raisons de compatibilité. les navigateurs rechercheront séquentiellement jusqu'à ce qu'ils trouvent un format pris en charge, ce qui signifie que la même police doit être disponible dans plusieurs formats. url(//:) format("no404") est une méthode d'écriture Bulletproof.

Les autres codes HTML et CSS sont les suivants :

.font-face-display {
    font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
 
<p class="font-face-display">Take me to your heart</p>

L'effet le plus important est le suivant :

Site Web de polices gratuites Font Squirrel

Font Squirrel est un excellent site Web de ressources de polices gratuites qui rassemble de nombreuses polices de haute qualité que les concepteurs de sites Web peuvent télécharger gratuitement. Il existe également l'outil de génération de format de police @font-face Generator qui peut générer plusieurs formats de police et codes CSS en téléchargeant un fichier de police, ce qui est très utile. Si vous avez besoin de superbes polices anglaises gratuites, c'est l'endroit où aller.

Si vous voulez une page colorée, vous avez besoin de plus de styles de police. Les gens ont proposé de nombreuses alternatives de police. En plus de la solution @font-face, il existe également. sIFR, Cufon, Typeface.js, etc. et .webfont, pour faire simple, .webfont dispose d'un tableau d'autorisation d'accès intégré dans la police. Le navigateur peut lire les informations d'autorisation et décider si ces polices doivent être téléchargées et rendues. De plus, Typekit est également une solution digne d'attention, plaçant les polices sur un serveur tiers pour les appeler. Les avantages et inconvénients de ces solutions seront présentés en détail ultérieurement.

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!