Welcome Login

Css: font-style, font-variant, font-weight, font-size and font-family


font-style:

font-style property specifies the font style for a text.

Eg:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}
    </style>
  </head>
  
  <body>
    <p class="normal">This is a paragraph, normal.</p>
    <p class="italic">This is a paragraph, italic.</p>
    <p class="oblique">This is a paragraph, oblique.</p>
  </body>
</html>

 

Outputs:

css-font1

 

Property values:

Value      Description

normal     The browser displays a normal font style (default). 	
italic     The browser displays an italic font style.
oblique    The browser displays an oblique font style.

 

 

 

font-variant:

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

font-variant property specifies whether or not a text should be displayed in a small-caps font.

Eg:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.normal {font-variant:normal;}
    p.small {font-variant:small-caps;}
    </style>
  </head>
  
  <body>
    <p class="normal">My name is Hege Refsnes.</p>
    <p class="small">My name is Hege Refsnes.</p>
  </body>
</html>

 

Outputs:

css-font2

 

Property values:

Value          Description

normal         The browser displays a normal font (default).
small-caps     The browser displays a small-caps font.

 

 

 

font-weight:

font-weight property sets how thick or thin characters in text should be displayed.

Eg:

<!DOCTYPE html>
<html>
  <head>
  <style>
    p.normal {font-weight:normal;}
    p.light {font-weight:lighter;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}
  </style>
  </head>
  
  <body>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
  </body>
</html>

 

Outputs:

css-font3

 

Property values:

Value        Description

normal       Defines normal characters (default).

bold         Defines thick characters.

bolder 	     Defines thicker characters.

lighter      Defines lighter characters.

100          Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.
200
300
400
500
600
700
800
900 	

 

 

 

font-size:

font-size property sets the size of a font.

Eg:

<!DOCTYPE html>
<html>
  <head>
    <style>
    h1 {font-size:250%;}
    h2 {font-size:200%;}
    p {font-size:100%;}
    </style>
  </head>
  
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
  </body>
</html>

 

Outputs:

css-font4

 

Property values:

Value       Description

xx-small    Sets the font-size to an xx-small size
x-small     Sets the font-size to an extra small size
small       Sets the font-size to a small size
medium      Sets the font-size to a medium size (default).
large       Sets the font-size to a large size
x-large     Sets the font-size to an extra large size
xx-large    Sets the font-size to an xx-large size
smaller     Sets the font-size to a smaller size than the parent element
larger      Sets the font-size to a larger size than the parent element
length      Sets the font-size to a fixed size in px, cm, etc.
%           Sets the font-size to a percent of  the parent element's font size

 

 

 

font-family:

font-family property specifies the font for an element.

font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

1. family-name - the name of a font-family, like "times", "courier", "arial", etc.

2. generic-family - the name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note2: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Eg:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p.serif{font-family:"Times New Roman",Times,serif;}
    p.sansserif{font-family:Arial,Helvetica,sans-serif;}
    </style>
  </head>
  
  <body>
    <h1>CSS font-family</h1>
    <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
    <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
  </body>
</html>

 

Outputs:

css-font5

 

Property values:

Value             Description

family-name       prioritized list of font family names and/or generic family names
generic-family	

 

 

 

For further information, see here.


Created on: Monday, January 14, 2013 by Andrew Sin