La font-weightpropriété définit l'épaisseur ou l'épaisseur d'une police et dépend soit des faces de police disponibles dans une famille de polices, soit des poids définis par le navigateur.
span ( font-weight: bold; )La font-weightpropriété accepte soit une valeur de mot clé, soit une valeur numérique prédéfinie. Les mots clés disponibles sont:
normalboldbolderlighter
Les valeurs numériques disponibles sont:
100200300400500600700800900
La valeur du mot-clé normalcorrespond à la valeur numérique 400et la valeur boldcorrespond à 700.
Pour voir tout effet utilisant des valeurs autres que 400ou 700, la police utilisée doit avoir des faces intégrées correspondant à ces poids spécifiés.
Si une police a une version en gras («700») ou normale («400») dans le cadre de la famille de polices, le navigateur l'utilisera. Si ceux-ci ne sont pas disponibles, le navigateur imitera sa propre version en gras ou normale de la police. Il n'imitera pas les autres poids indisponibles. Les polices utilisent souvent des noms tels que «Regular» et «Light» pour identifier les autres poids de police.
La démonstration suivante montre l'utilisation des autres valeurs de poids:
La démo ci-dessus utilise la police gratuite Open Sans, intégrée à l'aide de l'API Google Web Fonts. La police est chargée avec tous les poids de police disponibles et ainsi, en utilisant la font-weightpropriété, les différents poids disponibles sont affichés comme décrit par le texte de chaque paragraphe. Les poids non disponibles affichent simplement le poids le plus proche logiquement.
Les polices courantes comme Arial, Helvetica, Georgia, etc. n'ont pas de poids autres que 400et 700. Ainsi, la même démo affichée avec l'une de ces polices n'afficherait que deux poids dans les neuf paragraphes.
Utiliser des mots clés "plus audacieux" et "plus légers"
Les valeurs de mot-clé bolderet lightersont relatives au poids de police calculé de l'élément parent. Le navigateur recherchera le poids «plus audacieux» ou «plus léger» le plus proche, en fonction de ce qui est disponible dans la famille de polices, sinon il choisira simplement «400» ou «700», selon ce qui a le plus de sens.
Les éléments enfants n'hériteront pas des valeurs de mot-clé «plus audacieux» et «plus léger», mais hériteront à la place du poids calculé.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |