CSS Font
CSS font porperties are used to change the outlook of texts. By using the font property the text size, font family, style, color etc. can be changed.
Here are some important property of CSS font:
- font-family property - It specifies the face of a font.
- font-style property - It specifies the style of a font. Such as: italic, normal or oblique.
- font-size property - It specifies the size of a font.
- font-variant property - It changes a font into small-caps font.
- font-weight property - It specifies the boldness or lightness effect of a font.
The font-family Property
There are two kinds of font-family in CSS. They are:
- Generic family - It is a group of similar font families. Example: Serif, Sans-serif, Monoscape etc.
- Font family - It is a specific font family. Example: Verdana, Arial etc.
You can use multiple font families. If the first one is not supported by browser then the following one is used. For multiple font family it must be separated by comma and if the font family is more than one word then it is surrounded by the quation.
Example:
The font-style Property
It specifies the style of a font. There are three values of font-style property:
- italic
- normal
- oblique
Example:
The font-size Property
It specifies the size of the font. You can change the font size by using font-size property. The font-size can be in px, em, % etc.
Example:
The font-variant Property
It changes the font into small-caps font. It values could be normal or small-caps.
Example:
The font-weight Property
It specifies the boldness or lightness effect of a font. It values could be bold, bolder, lighter, normal, 100, 200, 300, 400 etc.