font-weight
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
Le descripteur CSS font-weight
permet aux auteur·ice·s d'indiquer les graisses pour les polices fournies dans une règle @ @font-face
. La propriété font-weight
peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).
En général, un·e développeur·euse souhaite utiliser des polices d'une même famille avec différentes graisses. Avec les polices traditionnelles ou statiques, un fichier de police contient les caractères d'une famille dans une graisse et un style précis : par exemple, « Helvetica bold italic ». Pour permettre l'affichage de polices fines, normales, grasses ou extra-grasses lorsque la propriété font-weight
demande une graisse spécifique, vous pouvez définir plusieurs règles @font-face
pour la même famille (toutes avec la même valeur de descripteur font-family
), une pour chaque graisse ou plage de graisses.
Pour déclarer la police à utiliser pour une plage de graisses, indiquez une paire de valeurs de graisse séparées par un espace comme valeur du descripteur font-weight
. Lorsque les règles CSS définissent une graisse via la propriété font-weight
ou la propriété raccourcie font
, la police appropriée sera alors utilisée.
Par exemple, si le descripteur est font-weight: 400 600;
, lorsque la propriété est font-weight: 450
ou font-weight: 550
, cette police sera utilisée pour cette famille de polices.
Que la police soit statique ou une police variable, la police correspondant à la plage sera utilisée. Dans ce cas, si la police est statique, 450
et 550
apparaîtront identiques. Si la police est variable, la seconde sera plus grasse.
Le descripteur est le même pour toutes les polices, mais la plage que vous définirez pour une police variable sera généralement plus large, parfois même 1 1000
pour utiliser la même police pour toutes les valeurs de la propriété font-weight.
Syntaxe
/* Valeurs simples */
font-weight: normal;
font-weight: bold;
font-weight: 400;
/* Valeurs multiples */
font-weight: normal bold;
font-weight: 300 500;
Valeurs
Le descripteur font-weight
accepte l'une des formes suivantes :
- Le mot-clé
auto
. - Une seule valeur
<font-weight-absolute>
. - Une paire de valeurs
<font-weight-absolute>
, séparées par un espace.
Chaque <font-weight-absolute>
peut être l'une des valeurs suivantes :
normal
-
Graisse normale. Équivalent à
400
. bold
-
Graisse grasse. Équivalent à
700
. <number>
-
Une valeur
<number>
comprise entre 1 et 1000 inclus. Les nombres plus élevés représentent des graisses plus épaisses (ou aussi épaisses) que les nombres plus faibles. Certaines valeurs courantes correspondent à des noms de graisses communs, comme décrit dans la section Correspondance entre les noms et les valeurs numériques ci-dessous.
Correspondance entre les noms et les valeurs numériques
Les valeurs numériques entre 100
et 900
correspondent (approximativement) à ces noms communément utilisés :
Valeur | Nom commun |
---|---|
100 | Thin (Hairline) |
200 | Extra Light (Ultra Light) |
300 | Light |
400 | Normal |
500 | Medium |
600 | Semi Bold (Demi Bold) |
700 | Bold |
800 | Extra Bold (Ultra Bold) |
900 | Black (Heavy) |
Polices variables
La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.
Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "wght"
qui est utilisé afin d'implémenter ces largeurs variables.
Définition formelle
En lien avec les règles @ | @font-face |
---|---|
Valeur initiale | normal |
Valeur calculée | comme spécifié |
Syntaxe formelle
font-weight =
auto |
<font-weight-absolute>{1,2}
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
Exemples
>Sélectionner les polices normales et grasses
Dans cet exemple, nous incluons deux polices, une de graisse normale et une de graisse grasse, de la famille de polices « Fira Sans » en utilisant deux règles @font-face
. Nous définissons les descripteurs font-weight
pour correspondre à la graisse des polices.
Ensuite, les règles CSS peuvent sélectionner la police normale ou la police grasse pour la famille « Fira Sans » simplement en définissant la propriété font-weight
. Notez que l'élément HTML <strong>
sélectionne également la police grasse, car par défaut les éléments <strong>
ont une valeur de propriété CSS font-weight
à bold
.
HTML
<p class="one">Fira Sans, paragraphe de graisse `normal`</p>
<p class="two">Fira Sans, paragraphe de graisse `bold`</p>
<p><strong>Fira Sans, élément <strong> (`bold`)</strong></p>
CSS
@font-face {
font-family: "Fira Sans";
font-weight: normal;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: bold;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}
body {
font-family: "Fira Sans", serif;
font-size: 2rem;
}
p.one {
font-weight: normal;
}
p.two {
font-weight: bold;
}
Résultat
Définir des plages de font-weight
Cet exemple montre comment inclure plusieurs polices pour différentes graisses (et styles), en incluant plusieurs déclarations @font-face
avec la même valeur de font-family
. En définissant les descripteurs font-weight
avec des plages de 1 à 1000, dans le reste de vos feuilles de style, vous pouvez déclarer une valeur de font-weight
(ou de font-style
), et être assuré·e que la police appropriée sera utilisée.
HTML
<p class="one">Cette police a une graisse de 100</p>
<p class="three">Cette police a une graisse de 300</p>
<p class="four">Cette police a une graisse de 400</p>
<p class="five">Cette police a une graisse de 500</p>
<p class="seven">Cette police a une graisse de 700</p>
<p class="nine">Cette police a une graisse de 900</p>
CSS
Nous incluons quatre déclarations @font-face
pour quatre polices différentes de la famille Fira Sans
, comme dans l'exemple précédent. Chaque déclaration est associée à une plage différente de valeurs de font-weight, mais toutes utilisent le même nom de police.
La première déclaration utilise FiraSans-Regular
et sa plage de font-weight couvre toute la plage possible.
Les trois autres déclarations utilisent les versions light, bold et extra-bold de la police, et leurs plages de font-weight définissent des sous-ensembles de la plage comme suit :
- la police light est associée à la plage 1-300
- la police bold à la plage 500-700
- la police extra-bold à la plage 700-1000
La cascade CSS garantit que les trois dernières déclarations remplacent les parties de la plage définies dans la déclaration FiraSans-Regular
.
@font-face {
font-family: "Fira Sans";
font-weight: 1 1000;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 1 300;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 500 700;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}
@font-face {
font-family: "Fira Sans";
font-weight: 700 1000;
src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}
body {
font-family: "Fira Sans", serif;
font-size: 2rem;
}
p.one {
font-weight: 100;
}
p.three {
font-weight: 300;
}
p.four {
font-weight: 400;
}
p.five {
font-weight: 500;
}
p.seven {
font-weight: 700;
}
p.nine {
font-weight: 900;
}
Résultat
Le paragraphe seven
utilise la police extra-bold. Bien que font-weight: 700
corresponde aux déclarations FiraSans-Bold
et FiraSans-ExtraBold
, comme FiraSans-ExtraBold
est déclarée plus tard, elle remplace FiraSans-Bold
pour cette valeur.
De même, les valeurs 100
et 300
utilisent la police light ; bien que FiraSans-Regular
et FiraSans-Light
incluent 300
dans leurs plages, FiraSans-Light
est déclarée plus tard. On pourrait aussi déclarer FiraSans-Regular
après FiraSans-Light
, mais il faudrait alors modifier la plage du descripteur font-weight.
Définir une plage pour une police variable
Dans cet exemple, nous utilisons le descripteur font-weight
pour restreindre la plage de graisses utilisables avec une police variable.
Nous incluons une police variable, « League Mono », via une seule règle @font-face
. Nous utilisons la valeur font-weight: 300 700
pour limiter effectivement la plage de graisses disponibles. Si une règle CSS utilise notre police « League Mono », alors si elle spécifie une graisse hors de cette plage, la valeur sera ramenée dans la plage.
HTML
Nous incluons un paragraphe avec <output>
initialisé à 400
, valeur par défaut pour le texte non stylisé. Ce paragraphe est placé entre deux autres, pour comparer le rendu des graisses.
Nous incluons un <input/range>
de type range
, dans un <label>
, avec un step
à 50
.
<p>LeagueMono, font-weight: 300 (comparaison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (exemple)</p>
<p>LeagueMono, font-weight: 700 (comparaison)</p>
<label
>Changer la graisse :
<input type="range" min="50" max="1000" step="50" value="400" />
</label>
CSS
Nous définissons la plage du descripteur font-weight
à 300 700
, ce qui limite la police variable à cette plage.
@font-face {
font-family: LeagueMono;
src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
font-weight: 300 700;
}
p {
font-family: LeagueMono, serif;
font-size: 1.5rem;
}
p:first-of-type {
font-weight: 300;
}
p:last-of-type {
font-weight: 700;
}
JavaScript
Nous incluons un gestionnaire d'événement qui met à jour la propriété font-weight
du paragraphe et le texte affiché :
const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");
range.addEventListener("change", () => {
text.style.fontWeight = range.value;
log.innerText = range.value;
});
Résultat
Changez la graisse du paragraphe via le curseur.
Notez que le paragraphe exemple n'est pas plus fin que le paragraphe 300
au-dessus ni plus gras que le paragraphe 700
en dessous : la graisse est limitée à la plage définie par le descripteur font-weight
.
Spécifications
Specification |
---|
CSS Fonts Module Level 4> # font-prop-desc> |
Compatibilité des navigateurs
Loading…