The CSS font properties allow you to set various styles for fonts like font family, size and boldness, variant, etc. of a text.
Following are the properties:
- font-family
- font-size
- font-style
- font-variant
- font-weight
Font-Family:
The font-family property can hold various font names as a fallback system.
If the browser does not support the first font, it tries the second font, and so on.
If the browser does not support the first font, it tries the second font, and so on.
Write the font name that you want and end with a generic family because if fonts are not available then the browser picks a similar font in the generic family.
CSS font-family are two types:
Generic family: It contains Serif, Sans-serif, and Monospace.
Font family: It includes the font family name like Arial, New Times Roman, etc.
Font-Size:
The font-size property is used to set the font size of an HTML element. The font-size can be set in following ways.
Setting Font Size with Keywords
By using a keyword, you can set the font-size of the element.
Absolute size is defined following keywords: xx-small, x-small, small, medium, large, x-large, xx-large.
Relative size is defined using one of the following keywords: smaller, larger.
Setting Font Size with Pixels
You can set the font-size in pixel values when you need the pixel accuracy.
Setting Font Size with Em
The font-size is set by using em (1em, 2em, etc) values also. If you set a font-size of 10px on the body element, then 1em = 10px. If you have not set the font-size then the browser default size probably 16px. So, by default 1em=16px.
Using the Combination of Percentage and Em
The solution to achieve a similar effect in all browsers is to set a default font-size in percentage for the <body> element.
Font Style:
This property is used to set the font style of an HTML element. It can be “normal, italic or oblique”.
Font Weight:
CSS font-weight property which used to define the weight or boldness of the font.
The possible values of font-weight may be normal, bold, bolder, lighter or number (100, 200….. up to 900).
Font Variant:
The font-variant property is used to set the text in special small-caps.
The values for the font-variant property are normal, small-caps and inherit.