Tutoriel CSS3-Polices

Programmeurs de développement front-end, que savez-vous de l'utilisation du tutoriel CSS3-@font-face pour implémenter des polices personnalisées ? Aujourd'hui, nous allons vous présenter CSS3 @font-face. Si vous êtes intéressé, vous pouvez en savoir plus.

Dans les pages Web, nous pouvons utiliser la propriété 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 du fait que la police soit 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.

Règles CSS3 @font-face :

Avant CSS3, les concepteurs Web devaient utiliser des polices déjà installées sur l'ordinateur de l'utilisateur.

Avec CSS3, les concepteurs Web peuvent utiliser n'importe quelle police de leur choix.

Lorsque vous trouvez ou achetez une police que vous souhaitez utiliser, vous pouvez stocker le fichier de police sur le serveur Web et il sera automatiquement téléchargé sur l'ordinateur de l'utilisateur en cas de besoin.

Votre "propre" police est définie dans la règle CSS3 @font-face.

@font-face prend en charge les attributs suivants :

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

font-style : définit 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.

Prise en charge du navigateur :

Firefox, Chrome, Safari et Opera prennent en charge les polices de type .ttf (True Type Fonts) et .otf (OpenType Fonts).

Internet Explorer 9 prend en charge la nouvelle règle @font-face, mais ne prend en charge que les polices de type .eot (Embedded OpenType).

Remarque : Internet Explorer 8 et versions antérieures ne prennent pas en charge la nouvelle règle @font-face.

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 (comme myFirstFont), puis pointer vers le fichier de police.

Pour utiliser une police pour un élément HTML, référencez le nom de la police (myFirstFont) via l'attribut font-family :

Exemple :

<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>

Utilisez du gras font :

Vous devez ajouter un autre @font-face contenant un descripteur pour le texte en gras :

Exemple :

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf’),
url(‘Sansation_Bold.eot’); /* IE9+ */
font-weight:bold;
}

Le fichier "Sansation_Bold.ttf" est un autre A fichier de police contenant des caractères gras pour la police Sansation.

Le navigateur utilisera cette police chaque fois que le texte avec la famille de polices "myFirstFont" doit être en gras.

De cette façon, nous pouvons définir de nombreuses règles @font-face pour la même police.

Descripteurs de polices CSS3 :

Le tableau suivant répertorie tous les descripteurs de polices pouvant être définis dans la règle @font-face :

descripteur	valeur	description
font-family	nom	obligatoire. Spécifie le nom de la police.
src	URL	Obligatoire. Définit l'URL du fichier de police.
font-stretch	normal condensé ultra-condensé extra-condensé semi-condensé expansé semi-expansé extra-expansé ultra-expansé	Facultatif. Définit comment étirer la police. La valeur par défaut est "normale".
font-style	ormal italique oblique	facultatif . Définissez le style de la police. La valeur par défaut est "normale".
font-weight	normal gras 100 200 300 400 500 600 700 800 900	Facultatif. Définit le poids de la police. La valeur par défaut est "normale".
gamme-unicode	gamme-unicode	Facultatif. Définit la plage de caractères UNICODE prise en charge par la police. La valeur par défaut est "U 0-10FFFF".

Ce qui précède est le contenu du didacticiel CSS3 - polices. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !