font-weight property allows us to set the weight or boldness of a font, choosing from the available weights of the font.
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.
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
bold, and so the
lighter keyword value displayed the normal font.
There are other numeric values also which you can give to the
200 (extra light)
600 (semi bold)
800 (extra bold)
700 give the same effect as that given by
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
bold produces normal font weight for values 100-500 and bold text for values 600-900.
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
bolder font weights to elements whose parent elements have numeric font weight values to get a desired effect.
font-weight property is supported by almost all the browsers.