Next up is the font-weight property. The
font-weight property is used to control the weight
of your text. This is what most people know as the Bold
attribute of a font.
You can specify whether
your text is Bold or not by specifying it's font-weight property. Since
there is no official bold or font-bold property in CSS, to make your
text bold you must specify it's font-weight property. The reason there
is no font-bold property in CSS is because CSS gives you the ability
to have multiple levels of boldness (also called the "weight" of the
font). Typically, in a WYSIWYG
application the bold property is a simple "on" or "off" value. Your text
is either bold or it's not. But with CSS, you're given a little more
control. The creators of CSS wanted to come up with a name for this
property that accurately describes what it does. Since, when most people
hear the word Bold they associate it with a simple "on" or "off" value,
font-bold wouldn't quite cut it. The creators of CSS wanted to give you
more control. They wanted to come up with something where people could
assign an actual number to the property to specify it's level of
boldness, so that is why they came up with the name font-weight. The
font-weight property can be one of the following values:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
99% of the time you will probably only be using the
normal or bold options (because not all browsers can display multiple
levels of boldness). If your browser can display multiple
levels of boldness you can use one of the numeric values 100 to 900. In
this case, 100 is the least amount of boldness and 900 is the most
amount of boldness. Normal text is equivalent to a font-weight of 400,
and "bold" text is equivalent to a font-weight of 700. You can also use
the bolder or lighter keywords to specify that your font should be
bolder or lighter than it's default (inherited) value.
Tip:
This property is optional. If you would like to include it in your
generated CSS code simply check the checkbox by it's name (to enable it)
and choose a value for it from the font-weight dropdown list.
Read
an official description of the font-weight property from the W3C