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;
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.
/*
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;