The font-weight property allows us to set the weight or boldness of a font, choosing from the available weights of the font.
CSS
font-weight: value;
Values
The font-weight can either given by keyword values or numberic values.
The keyword values are given below.
normal : This is the normal font weight.
bold : Makes font bold.
lighter : Makes font weight lighter than the parent element.
bolder : Makes font weight bolder than the parent element.
See the Pen font-weight by Aakhya Singh (@aakhya) on CodePen.
The browser shows only the available font weights in the font family. In the above demo, there is no available font weight between the values normal and bold, and so the lighter keyword value displayed the normal font.
There are other numeric values also which you can give to the font-weightproperty.
100 (thin)
200 (extra light)
300 (light)
400 (normal)
500 (medium)
600 (semi bold)
700 (bold)
800 (extra bold)
900 (black)
The values 400 and 700 give the same effect as that given by normal and boldrespectively. Rest all the numeric values produce the intermediate font weights if the font weights are available in the font family.
The fonts that provide only normal and bold produces normal font weight for values 100-500 and bold text for values 600-900.
See the Pen font-weight by Aakhya Singh (@aakhya) on CodePen.
In the above demo, only the font weights mapping to the values 300, 400, 600, 700 and 800 are available for the Open Sans font family. As a result, the font weights of the paragraphs having the other numeric values get displayed with the nearest font weight that is available in the font family.
You can also give lighter or bolder font weights to elements whose parent elements have numeric font weight values to get a desired effect.
Browser Support
The font-weight property is supported by almost all the browsers.
