Font properties in CSS

We are to discuss about font and their related properties in CSS context.  Different  font properties that we are going to discuss.

• Font-family
• Font-style
• Font-variant
• Font-size
• Font-weight

Font-family:-
                      This is used to define a list of fonts that should be prioritised to be used to display a given element and Web page. If the first font on the list is not installed on the computer used to access the site the next font on the list will be tried until a suitable font is found.
There are two types of names used to categorize fonts:
Family-names: name of the font is its family name examples of family-name can be "Arial", "times new roman " or" tahoma" etc.
Generic family: generic families can best be described as groups of family-names with uniformed appearance. An example is "sans-serif", which is the collection of fonts without "feet".

For example :
                           H1{Font-family :arial, verdana, sans-serif ;}
                            H2{Font-family :" times new roman", serif;}
H1 will be displayed using the font "arial". If this not installed on the user's computer, "vardana" will be used instead. If both these fonts are unavailable, a font from the "sans-serif" family will be used to show.

Font-style property: A font can be displayed in different styles such italics or normal etc. This property is specified via Font-style property.
Font-style property defines the style in normal or italic or oblique etc.


For example :
                           H6{Font-family :"times new roman", sans-serif ;Font-style :oblique;}
                           P{Font-style :italic;}

Font-variant property :
                                       A font can be displayed in two variants:normal font or small - caps font.  A small-caps font is a font that uses smaller sized capitalized letters in place of lower case letters.

For example :

                   H3{Font-variant:small-caps;}
                   H4{Font-variant :normal ;}

Font-weight property :
                                      The property Font-weight specifies the boldness or heaviness for a font. A font can be set to either normal or bold via property font-weight.
Rang is 100-900.

For example :

H1{font-weight :800;}
P{font-weight :normal ;}

Font-size property :
                                  To set the size of the font, you can use the property font-size. There are many different units to describe font sizes. px(pixels), pt(point size), %(percentage) and em etc.

H1{font-size :20px;}
strong{font-size :17pt;}
li{font-size :120%;}
p{font-size:2em;}

em-means one em is equal to the font size for the current font. 3em means triple the size.