/* Valeurs avec un mot-clé */
font-weight: normal;
font-weight: bold;
/* Valeurs relatives à l'élément parent */
font-weight: lighter;
font-weight: bolder;
/* Valeurs numériques */
font-weight: 1;
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;
/* Valeurs globales */
font-weight: inherit;
font-weight: initial;
font-weight: unset;
font-weight: normal; /*equals font-weight: 400; */
font-weight: bold; /*eq font-weight: 700; */
font-weight: 100;
: 200
: 100n, n = 1...9
/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;p {
font-weight: normal;
}
a {
font-weight: bold;
}
p.thick {
font-weight: 780;
}normal -> The default, defines what is considered the weight of the normal
characters.
bold -> Defines thick characters than normal ones
bolder -> Defines thicker characters than normal ones
lighter -> Defines lighter characters than normal ones
[100, 200, 300, 400, 500, 600, 700, 800, 900] -> Goes from thin to thick
characters.
Where 400 is the same as normal.
700 is the same as bold.
900 the same as bolder.
initial -> Sets this property to its default value.
inherit -> Inherits this property from its parent element. <p style="font-weight:normal;">font-weight: normal</p>
<p style="font-weight:bold;">font-weight: bold</p>
<p style="font-weight:bolder;">font-weight: bolder</p>
<p style="font-weight:lighter;">font-weight: lighter</p>
<p style="font-weight:100;">font-weight: 100</p>
<p style="font-weight:200;">font-weight: 200</p>
<p style="font-weight:300;">font-weight: 300</p>
<p style="font-weight:400;">font-weight: 400</p>
<p style="font-weight:500;">font-weight: 500</p>
<p style="font-weight:600;">font-weight: 600</p>
<p style="font-weight:700;">font-weight: 700</p>
<p style="font-weight:800;">font-weight: 800</p>
<p style="font-weight:900;">font-weight: 900</p>/*
Thin, Hairline 100
Extra Light, Ultra Light 200
Light 300
Normal, Regular 400
Medium 500
Semi Bold, 600
Bold 700
Extra Bold, Ultra Bold 800
Black, Heavy 900
*/
.myclass {
font-weight: normal; /* 400 */
}
.myOtherClass {
font-weight: 700; /* Bold */
}
/* You can Use this List to see all the different Types */
/* Make sure you have the Font Files Downloaded and Embedded */
Press Like if you like my post :)font-weight: 375;
font-variation-settings: 'wght' 375;p{
font-weight: bold;
}/* Keyword values */
font-weight: normal;
font-weight: bold;
/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;
/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;