Les sélecteurs CSS indiquent au navigateur à quel endroit appliquer les polices web en cours d’utilisation, ainsi que la graisse et le style de la police à utiliser pour le texte.

Utilisation du nom de famille de polices dans votre feuille CSS

La page Projets web répertorie le nom de la famille de polices (font-family) CSS, le poids numérique et le style de chaque police du projet. Dès que vous avez inclus le code incorporé dans votre document, utilisez les noms de famille de polices de la feuille CSS pour appliquer les polices au texte. Par exemple :

h1 {
  font-family: "proxima-nova", sans-serif;
}
Utilisation du nom de famille de polices dans votre feuille CSS

Spécification des polices de substitution

Si le navigateur d’un utilisateur ne prend pas en charge les polices web ou si celles-ci ne se chargent pas pour une raison quelconque, les polices de substitution de la pile CSS sont utilisées à la place.

La pile de polices doit contenir au moins une police de substitution uniformément disponible sur toutes les plates-formes (Georgia ou Arial, par exemple), suivie d’un nom de famille de polices générique (serif ou sans-serif, par exemple). Si le navigateur ne trouve pas la première police, il essaie la deuxième, et ainsi de suite.

Utilisation de plusieurs graisses et styles

Dans le code CSS, vous pouvez définir, à l’aide de valeurs numériques, des épaisseurs de police autres que « normale » et « grasse ». Voici une liste des valeurs numériques auxquelles correspondent le plus souvent ces épaisseurs :

  • 100 = maigre
  • 200 = extra-maigre
  • 300 = légère
  • 400 = normale, livre
  • 500 = moyenne
  • 600 = semi-grasse
  • 700 = grasse
  • 800 = épaisse
  • 900 = noire

Vous trouverez les valeurs numériques de toutes les polices de votre projet sur la page Projets web.

Utilisation de graisses et de styles dans votre feuille CSS

Utilisez, par exemple, ce code CSS pour appliquer l’épaisseur 100 d’une police à l’élément h1 :

h1 {
  font-weight: 100;
}

Utilisation de noms spécifiques à une variation dans Internet Explorer 8

Internet Explorer 8 charge, au maximum, quatre épaisseurs par famille. Si vous utilisez deux épaisseurs étroitement liées (400 et 500, par exemple), il se peut qu’une seule épaisseur se charge correctement. Pour remédier à ces deux bogues, Adobe Fonts distribue des noms de famille de polices (font-family) spécifiques à une variation à ces versions du navigateur.

Le nom spécifique à la variation doit être ajouté, le cas échéant, au début d’une pile font-family, avant le nom de famille principal :

#post-title {
  font-family: "proxima-nova-n6","proxima-nova", sans-serif;
  font-style: normal;
  font-weight: 600;
}

Les noms se composent du nom de famille de polices standard, suivi d’un tiret et d’une description de variation de police (ou FVD, Font Variation Description). Par exemple, le nom spécifique à la variation pour proxima-nova qui contient l’épaisseur 600 normale est proxima-nova-n6.

Le nom spécifique à la variation ne sera pas défini dans les navigateurs qui n’ont pas ces problèmes ; ils utiliseront donc le nom de famille complet placé en deuxième place dans la pile.

La plupart des utilisateurs n’ont pas besoin d’utiliser ces noms de famille de polices supplémentaires. Vous ne devrez les ajouter que si vous constatez des problèmes d’affichage des polices, en particulier dans Internet Explorer 8.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne