CSS3 Police

Règle @font-face CSS3

Avec les versions précédentes de CSS, les concepteurs web devaient utiliser des polices déjà installées sur l'ordinateur de l'utilisateur.

UtilisationCSS3Les concepteurs web peuvent utiliser n'importe quelle police de leur choix.

Lorsque vous trouvez le fichier de police que vous souhaitez utiliser, incluez simplement le fichier de police dans votre site web, et il sera automatiquement téléchargé par les utilisateurs qui en ont besoin.

La police que vous avez sélectionnée dans la nouvelleCSS3version relative à la@font-facedescription de la règle.

Votre police "personnelle" est, au niveau deCSS3 @font-face,définie dans les règles.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.

Internet Explorer 9+, Firefox, Chrome, Safari et Opera prennent en charge les polices WOFF (Web Open Font Format).

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

Chrome, Safari et Opera prennent également en charge les polices SVG/collapse.

Internet Explorer prend également en charge les polices EOT (Embedded OpenType).

Remarque :Internet Explorer 8 et les 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 (par exemple, myFirstFont), puis pointer vers le fichier de police.

	Astuce :Utilisez des noms de police en minuscules pour les URL ; les lettres majuscules peuvent produire des résultats inattendus dans IE

Pour utiliser la police pour un élément HTML, faites référence au nom de la police (myFirstFont) via la propriété font-family :

Exemple

<style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

Essayez-le vous-même »

Utilisez du texte en gras

Vous devez ajouter une autre règle @font-face qui contient du texte en gras :

Exemple

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

Essayez-le vous-même »

Le fichier "Sansation_Bold.ttf" est un autre fichier de police qui contient les caractères gras de la police Sansation.

Lorsque le navigateur utilise la famille de polices "myFirstFont" pour ce texte, il doit être rendu en gras.

De cette façon, vous pouvez avoir plusieurs règles @font-face pour la même police.

Description des polices CSS3

Le tableau suivant répertorie tous les descripteurs de police et les définitions à l'intérieur de la règle @font-face :