Thursday, November 1, 2012

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 }