Using Font in CSS

Font family [font-family]
The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page.

 
    h1 {font-family: arial, verdana, sans-serif;}
    h2 {font-family: "Times New Roman", serif;}

Font style [font-style]
The property font-style defines the chosen font either in normal, italic or oblique.

 
    h2 {font-family: "Times New Roman", serif; font-style: italic;} 

Font variant [font-variant]
The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

 
    h1 {font-variant: small-caps;}
    h2 {font-variant: normal;}

Font weight [font-weight]
The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold.

 
    h1 {font-family: arial, verdana, sans-serif; font-weight: bold;} 
    h2 {font-family: arial, verdana, sans-serif; font-weight: normal;} 

Font size [font-size]
The size of a font is set by the property font-size.
There are many different units (e.g. pixels and percentages) to choose from to describe font sizes.

 
 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120%;}
 p {font-size: 1em;}

Compiling [font]
Using the font short hand property it is possible to cover all the different font properties in one single property.

   
  p {
 font-style: italic;
 font-weight: bold;
 font-size: 30px;
 font-family: arial, sans-serif;
      }

The above one can be rewritten as

 
   p {
 font: italic bold 30px arial, sans-serif;
    } 

Judul: Using Font in CSS
Ditulis oleh Unknown
Rating Blog 5 dari 5