Syntax |
selector {font-weight: value;}
- value is specified by using one of the following keywords: normal, bold, bolder, lighter, inherit or one of the following weight-numbers: 100, 200, 300, 400, 500, 600, 700, 800, or 900.
|
Usage |
The font-weight property is used to specify the weight, or darkness, of a font.
This property is specified by using a keyword, or a weight-number, according to the syntax shown above. Weight-numbers are 100, 200, 300, 400, 500, 600, 700, 800, and 900. It should be noted that not all font families support 9 levels of font weights. Therefore, each successive weight-number produces a weight that is equal to, or greater than, the previous weight-number. The weight-numbers 400 and 700 are equivalent to the keywords normal and bold respectively.
CSS Example: The font-weight properties are set using both keywords and weight-numbers. #tst1 {font-weight: bolder;}
#tst2 {font-weight: lighter;}
#tst3 {font-weight: normal;}
#tst4 {font-weight: 400;}
#tst5 {font-weight: bold;}
#tst6 {font-weight: 700;} |
Keywords |
- normal - This font weight is equivalent to the weight-number 400.
- bold - This font weight is equivalent to the weight-number 700
- bolder - This font weight is equal to, or greater than, the font weight inherited from the parent element.
- lighter - This font weight is equal to, or less than, the font weight inherited from the parent element.
- inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
|