Maison  >  Article  >  interface Web  >  Tutoriel CSS3-Polices

Tutoriel CSS3-Polices

黄舟
黄舟original
2016-12-27 15:53:451679parcourir

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 :

Tutoriel CSS3-Polices

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) !


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