CSS Font - font-weight
Description
Use font-weight to change the strength / boldness / emphasis of text within html elements.
The default is
normal which is the same as the value
400
font-weight: lighter;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-style: inherit;
See also: font, font-size, font-family, font-variant, font-style.
Examples for font-weight
Example 1:
A bold example:
test text test text test text test text
<style>
#test { font-weight: bold; }
</style>
<div id="test">test text test text test text test text</div>
Example 2:
A 100 example:
test text test text test text test text
<style>
#test2 { font-weight: 100; }
</style>
<div id="test2">test text test text test text test text</div>
Values for font
| font-weight |
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900 |
normal is the default. 400 is the same as normal. 700 is the same as bold |
| font-style |
normal|italic|oblique |
normal is the default. On most browsers oblique is the same as italic. |
| font-size |
em e.g. 1.3em
% e.g. 150%
pt e.g. 14pt
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
|
Specifies the size of the font/text. |
| font-family |
family-name
generic-family
|
Specifies the font name alternatively you can specify the generic name family name of the font/text. |