Font-weight - Propriété CSS

font-weight

Résumé des caractéristiques de la propriété font-weight

Description rapide
Sélectionne une graisse pour les caractères.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété font-weight passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de font-weight.

Font-weight property - Syntax diagramSyntax diagram of the font-weight CSS property. See stylescss.free.fr for details. normal normal bold bold number number bolder bolder lighter lighterfont-weight:;font-weight:;
Schéma syntaxique de la propriété font-weight.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • number est une valeur numérique de 1 à 1000, sans unité.

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.

Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900

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.

  • 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 ou plus, 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 plus, 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'à 1000.

    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; (normal) font-weight: inherit; font-weight: revert; font-weight: revertLayer; font-weight: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de 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 'Arial'
Police 'Montserrat'

Accéder à la propriété font-weight par programme.

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).

Javascript
let el = document.getElementById('id'); el.style['font-weight'] = 'bolder'; // ou let el = document.getElementById('id'); el.style.fontWeight = 'bolder';

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).

Javascript
let el = document.getElementById('id'); let value = el.style['font-weight']; // ou let el = document.getElementById('id'); let value = 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. A défaut ce sera la valeur initiale de la propriété (normal} dans le cas de font-weight). Mais la valeur calculée est toujours égale à quelque chose.

Dans le cas de font-weight, la valeur est toujours renvoyée sous sa forme numérique : un nombre de 100 à 900.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('font-weight');

Modifier la valeur de la propriété font-weight avec JQuery.

JQuery

$('#id').css('font-weight', 'bolder');
// ou
$('#id').css('fontWeight', 'bolder');

Lire la valeur calculée de la propriété font-weight avec JQuery.

JQuery
let value = $('#id').css('font-weight');

Démonstration des codes.

En cliquant sur les boutons ci-dessous, vous afficher, pour le premier bouton, la valeur telle qu'elle a été affectée, et pur le deuxième bouton, la valeur calculée. Dans le cas de font-weight on constate que la valeur calculée est toujours renvoyée sous la forme 100...900.

Exemple interactif avec la propriété font-weight.

Police :
font-weight :
Portons dix bons whiskys à l'avocat goujat qui fumait au zoo. (1)

(1) Pangramme de Georges Perec.

Compatibilité des navigateurs avec font-weight.

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 à 1000) dépend de la police choisie.

Colonne 1
Prise en charge de la propriété font-weight pour changer la graisse des caractères.
Colonne 2
Support des valeurs numériques (de 100 à 900) dans la syntaxe de font-weight.
1
Propriété
font-weight
2
Valeurs
numériques
Estimation de la prise en charge globale.
97%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété font-weight.

La propriété font-weight existe depuis la première spécification de CSS, et a peu évolué depuis.

Voir aussi, à propos des polices de caractères.

font-weight et les propriétés concernant les polices de caractères sont nombreuses. Elles sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
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-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
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-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit 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-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

⚠
palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@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.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.