Font Properties

The font properties allows set font style, size, variant.

-          Font-family

             The font-family sets the font for element.  There are two types of values for this property.

1.       Family name: like “Helvetica”

2.       Generic name:  like “Arial”

           Following is the example of font-family. The following code will apply fonts to <p> element.

                p{ font-family: Arial, Times New Roman}

-          Font-size

This property will set the size of the text in the element. There are several values for this property, these are as follows:

     o   xx-large

     o   x-large

     o   larger

     o   large

     o   medium

     o   small

     o   smaller

     o   x-small

     o   xx-small

     o   length

     o   % (percent)

Various properties can be set from extra small to extra large. Also length can be set for font-size property.

For example using length property:

        p{ font-size:20px}

-          Font-style

The font style property sets the font style. Following are the values for this property.

o   normal

o   italics

o   oblique

     p{ font-style: normal}

     

-          Font-variant

You can set variant of the text within the element. Following are the values for font-variant:

o   normal: It displays the normal font.

o   small-caps: In this case the all the characters are in uppercase but they are displayed smaller than other fonts.

Example:

     p{ font-variant: small-capsl}

-          Font-weight

You can set the weight of the font using this property. It has a fixed set of values those are as follows:

• lighter
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder

     p{ font-weight: lighter}

-          Font

We can set all the properties mentioned above by grouping them under the “font” property.

We can set font family, size, variant, weight under one name.

For example :

     p{ font: italic lighter 10px Arial }