CSS - Propriété font-weight

Description de la propriété font-weight.

font-weight définit la graisse des caractères (affichage en caractères gras).

Le rendu dépend beaucoup de la police utilisée. Certaines polices ne gèrent que deux possibilités : gras ou normal, d'autres proposent 3 ou 4 nuances, rares sont celles qui distinguent les 9 nuances prévues par font-weight.

Lorsqu'une graisse n'est pas disponible dans la police utilisée, le navigateur peut utiliser la graisse la plus proche ou synthétiser la graisse par calcul. Voir à ce sujet la propriété font-synthesis.

La police Montserrat (Google Font) est particulièrement riche : elle dispose des neuf niveaux de graisse prévus par CSS.

Valeurs pour font-weight.

• font-weight: normal;

  Valeur par défaut. Les caractères sont affichés avec la graisse médiane.

• font-weight: bold;

  Les caractères sont affichés en gras.

• font-weight: bolder;

  Valeur relative : les caractères sont affichés dans une graisse plus importante que celle du parent.

  1. Graisse du parent = 100, 200 ou 300, bolder prend la valeur 400.
  2. Graisse du parent = 400 ou 500, bolder prend la valeur 700.
  3. Graisse du parent = 600, 700, 800 ou 900, bolder prend la valeur 900.
• font-weight: lighter;

  Valeur relative : les caractères sont affichés dans une graisse moins importante que celle du parent.

  1. Graisse du parent = de 100 à 500, lighter prend la valeur 100.
  2. Graisse du parent = 600 ou 700, lighter prend la valeur 400.
  3. Graisse du parent = 800 ou 900, lighter prend la valeur 700.
• font-weight: 300;

  Les caractères sont affichés avec une épaisseur d'autant plus importante que le nombre est élevé. La valeur spécifiée peut être 100, 200, 300, jusqu'à 900.

  Ces nuances ne sont pas forcément toutes présentes dans la police utilisée. Quand c'est le cas, elles sont couramment dénommées :
  100 : Thin,
  200 : Extra Light,
  300 : Light,
  400 : normal ou Regular,
  500 : Medium,
  600 : Semi Bold,
  700 : bold,
  800 : Extra Bold,
  900 : Black.

• font-weight: initial;

  La valeur initiale est auto.

• font-weight: unset; font-weight: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

(1) Pangramme de Georges Perec.

Compatibilité et prise en charge par les navigateurs.

La propriété font-weight en elle même est bien gérée par tous les navigateurs mais la bonne restitution des nuances (de 100 à 900) dépend de la police choisie.

Voir aussi...

Polices et caractères - Propriétés.

• font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
• font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
• font-family : Définit le nom de la police de caractères.
• font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
• font-kerning : Ajustement du crénage entre caractères.
• font-size : Ajuste la taille des caractères.
• font-size-adjust : Définition du coefficient d'aspect de la police.
• font-stretch : Modifie l'étirement ou la compression des caractères.
• font-style : Sélectionne les styles italique ou oblique de la police de caractères.
• font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
• font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
• font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
• font-variant-caps : Applique une capitalisation des caractères.
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• font-variant-ligatures : Active ou désactive la ligature des caractères.
• font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
• text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
• text-decoration-color : Définit la couleur du trait de décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
• @font-feature-values : Définit les variantes typographiques à utiliser.