font-weight - Propriété CSS
Résumé des caractéristiques de la propriété font-weight
normal
| bold
| bolder
| lighter
| 100
| 200
| 300
| 400
| 500
| 600
| 700
| 800
| 900
normal
font-weight
passe progressivement d'une valeur à une autre.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.
Remarque : font-weight
peut aussi être un descripteur, utilisé avec la directive @font-face
.
Les différents usages de font-weight
.
Le mot font-weight
correspond à la propriété décrite sur cette page, mais peut aussi être un descripteur
utilisable avec les directives suivantes :
@font-face
: Définit tous les paramètres d'une police de caractères téléchargeable.
Valeurs pour font-weight
.
number
est une valeur numérique de1
à1000
.
- 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 ou heavy. - font-weight:
initial
; font-weight:inherit
; font-weight:revert
; font-weight:revert-layer
; font-weight:unset
;La valeur initiale est :
.normal
Animation de la propriété font-weight
.
Voici un exemple d'animation sur la propriété font-weight
.
L'animation est plus ou moins saccadée suivant la police choisie. En effet certaines polices ne disposent que de deux o trois épaisseur de graisse,
tandis que d'autres en proposent davantage.
L'idéal étant les polices dites "variables", comme Montserrat
qui permettent de faire évoluer la graisse de façon continue.
Police 'Montserrat'
Manipulation de la propriété font-weight
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Modifier la valeur de font-weight
en Javascript.
Le code ci-dessous est un exemple qui montre comment modifier la valeur de font-weight
pour un élément el
.
Deux syntaxes sont possibles : avec le nom de la propriété écrit en kebab-case
(un tiret pour séparer les mots),
ou avec le nom de la propriété écrit en camel-case
(une majuscule pour séparer les mots).
function setFontWeight(el) {
el.style['font-weight']='';
// ou
el.style.fontWeight='';
}
Lire en Javascript la valeur de font-weight
.
Le code ci-après ne fonctionne que si la propriété a été affectée directement à l'élément avec l'attribut style
du code HTML,
et non pas en passant par un sélecteur CSS.
La valeur est renvoyée telle qu'elle a été définie (valeur prédéfinie ou nombre de 100
à 900
).
function getFontWeight(el) {
alert(el.style['font-weight']);
// ou
alert(el.style.fontWeight);
}
Lire la valeur calculée de font-weight
en Javascript.
La valeur calculée est celle qui résulte de la valeur affectée à font-weight
via un sélecteur, ou la valeur déterminée via le mécanisme d'héritage.
Dans le cas de font-weight
, la valeur est toujours renvoyée sous sa forme numérique : un nombre de 100
à 900
.
function getCalcFontWeight(el) {
alert(window.getComputedStyle(el).getPropertyValue('font-weight'));
}
Modifier la valeur de la propriété font-weight
avec JQuery.
function setFontWeight(el) {
$(el).css('font-weight','');
// ou
$(el).css('fontWeight','');
}
Lire la valeur calculée de la propriété font-weight
avec JQuery.
Comme en Javascript, la valeur est retournée sous la forme d'un nombre de 100
à 900
.
function getCalcFontWeight(el) {
alert($(el).css('font-weight'));
// ou
alert($(el).css('fontWeight'));
}
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.
font-weight
.
100
, .200
, 300
, etc.
font-weight
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que font-weight
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-weight
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.