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. Cliquez sur le lien Modifier le projet pour afficher les détails CSS de chaque projet.

Utilisation du nom de famille de polices dans une feuille CSS

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: "brandon-grotesque", sans-serif;
}

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 graisses de police autres que « normale » et « grasse ». Voici une liste des valeurs numériques auxquelles correspondent le plus souvent ces graisses :

  • 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 la graisse 700 d’une police à l’élément h1 :

h1 {
  font-weight: 700;
}

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

Internet Explorer 8 charge, au maximum, quatre graisses par famille. Si vous utilisez deux graisses étroitement liées (600 et 700, par exemple), il se peut qu’une seule graisse 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: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

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 de brandon-grotesque qui contient la graisse 700 est brandon-grotesque-n7.

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