communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Polices CSS3

Polices CSS3

Dans les pages Web, nous pouvons utiliser la propriété font-family de CSS pour définir les polices. Cependant, cela dépend si les polices définies peuvent être correctement rendues sur le. sur l'ordinateur de l'utilisateur. Indique si la police est installée sur l'ordinateur de l'utilisateur. 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.

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 l'a pris en charge dès la version 5, mais la méthode d'implémentation d'IE est via son propre format de police eot (Embeded Open Type), qui n'est pas pris en charge par les autres navigateurs. @font-face prend en charge les attributs suivants :

Font-family : Définissez le nom de la police du texte.

Style de police : définissez le style du texte.

Variante de police : 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.

Taille de police : définissez la taille de la police du texte.

src : Définissez le chemin relatif ou le chemin absolu de la police personnalisée.

Utilisez la police dont vous avez besoin

Dans la nouvelle règle @font-face, vous devez d'abord définir le nom de la police (disons myFirstFont), puis pointer vers cette police déposer .



Conseil : Veuillez utiliser une police minuscule pour l'URL, les lettres majuscules produiront des résultats inattendus dans IE


Pour utiliser une police pour les éléments HTML, veuillez référencer le nom de la police (myFirstFont) via l'attribut font-family : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div>
</body>
</html>

Si vous voulez une page colorée, il vous en faut plus pour la police styles, les gens ont proposé de nombreuses alternatives de polices. En plus de la solution @font-face, il existe également sIFR, Cufon, Typeface.js, etc., ainsi que .webfont. En termes simples, .webfont a une autorisation d'accès. intégré dans la police, le navigateur peut lire ces informations de licence et décider si ces polices doivent être téléchargées et restituées. De plus, Typekit est également une solution digne d'attention, qui place 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.

Formation continue
||
<html> <head> <meta charset="utf-8"> </head> <style> .font-face-display { font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; } </style> <body> <div class="font-face-display">Take me to your heart</div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492417 joue