Quick guide to a CSS Property - font-weight that Bold or light text on any HTML element.
CSS font-weight Property
The CSS property "font-weight" sets how thick or thin characters in text should be displayed. This provides variant thicker types.
font-weight: 400 is supposed to be equal to normal, while 700 is equal to bold. Finally, there are the relative values bolder and lighter that make a bit of text one step bolder or lighter than the default weight (which in turn depends on the absolute font-weight value you defined).
CSS Property Font-Weight Syntax
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Supported Values on property font-weight
Usually we can use any one of the following value for the property.
normal: Standard weight. Equivalent of 400
bold: Bold weight. Equivalent of 700
bolder: Bolder than the inherited font weight
lighter: Lighter than the inherited font weight
100 Lightest
200 Bolder than 100, lighter than 300
300 Bolder than 200, lighter than 400
400 Bolder than 300, lighter than 500. Equivalent of normal.
500 Bolder than 400, lighter than 600
600 Bolder than 500, lighter than 700
700 Bolder than 600, lighter than 800. Equivalent of bold.
800 Bolder than 700, lighter than 900
900 Boldest
Global Values
/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;
CSS Property Font Weight Supported Browsers
This supports in all major versions of all browsers. Below described the starting version of each browser to new version.
Chrome: 2.0
IE: 4.0
Mozilla: 1.0
Safari: 1.3
Opera: 3.5
CSS Property Font Weight Example
.css-text { font-weight: bold; }
/* Set paragraph text to be bold. */
p {
font-weight: bold;
}
Reference
COMMENTS