CSS: font-weight property
This CSS tutorial explains how to use the CSS property called font-weight with syntax and examples.
Description
The CSS font-weight property defines the weight or boldness of the font.
Syntax
The syntax for the font-weight CSS property is:
font-weight: value;
Parameters or Arguments
- value
The weight or boldness of a font. It can be one of the following:
Value Description normal Normal font-weight (Normal = 400 font-weight)
p { font-weight: normal; }bold Bold font-weight (Bold = 700 font-weight)
p { font-weight: bold; }bolder One font-weight darker than its parent element
p { font-weight: bolder; }lighter One font-weight lighter than its parent element
p { font-weight: lighter; }100, 200, 300, 400, 500, 600, 700, 800, 900 Numeric values for font-weight ranging from 100-900,
where 100 is the lightest, 900 is the boldest.
400 = normal, and 700 = bold.
p { font-weight: 400; }inherit Element will inherit the font-weight from its parent element
p { font-weight: inherit; }
Note
- Some fonts may only support normal and bold weights.
- When a numeric font-weight between 600-900 is provided and the exact numeric weight is not available, then the closest available darker font-weight will be used.
- When a numeric font-weight between 100-500 is provided and the exact numeric weight is not available, then the closest available lighter font-weight will be used.
Browser Compatibility
The CSS font-weight property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the font-weight property below, exploring examples of how to use this property in CSS.
Using Bold
Let's look at a CSS font-weight example where we set the text to bold.
span { font-weight: bold; }
In this CSS font-weight example, we have set the font weight of the text within the <span> tag to bold.
Using Normal
Next, let's look at a CSS font-weight example where we set the text to normal.
p { font-weight: normal; }
In this CSS font-weight example, we have set the font weight of the text within the <p> tag to normal weight.
Using Numeric Value
Let's look at a CSS font-weight example where we set a text to a numeric font-weight.
p { font-weight: 500; }
In this CSS font-weight example, we have set the font weight of the text within the <p> tag to 500 which would use a darker font if one was available.
Advertisements