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.
- Graisse du parent = 100, 200 ou 300,
bolder
prend la valeur 400. - Graisse du parent = 400 ou 500,
bolder
prend la valeur 700. - Graisse du parent = 600, 700, 800 ou 900,
bolder
prend la valeur 900.
- Graisse du parent = 100, 200 ou 300,
- font-weight: lighter;
Valeur relative : les caractères sont affichés dans une graisse moins importante que celle du parent.
- Graisse du parent = de 100 à 500,
lighter
prend la valeur 100. - Graisse du parent = 600 ou 700,
lighter
prend la valeur 400. - Graisse du parent = 800 ou 900,
lighter
prend la valeur 700.
- Graisse du parent = de 100 à 500,
- 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
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
font-weight
:
(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.