CSS Font

Each is described in detail below:

font-family

The font-family property specifies the type of the font.

CSS Declaration	Output
p {font-family: verdana;}	Font Family Verdana.
p {font-family: arial;}	Font Family Arial.
p {font-family: impact;}	Font Family Impact.

font-size

The font-size property specifies the size of the font. The size can be numerical (length or percentage), or in text (possible values are "xx-large", "x-large", "large", "medium", "small", "x-small", and "xx-small").

CSS Declaration	Output
p {font-size:9px;}	Font Size 9px.
p {font-size:150%;}	Font Size 150%.
p {font-size:0.8cm;}	Font Size 0.8cm.
p {font-size:small;}	Font Size small.
p {font-size:large;}	Font Size large.

font-weight

The font-weight property specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. One can also specify "bold", "bolder", or "normal".

Examples below:

CSS Declaration	Output
p {font-weight: 100;}	This is font weight 100.
p {font-weight: 900;}	This is font weight 900.
p {font-weight: bold;}	This is bold font weight.

font-style

The font-style property specifies whether the font is italic or oblique.

CSS Declaration	Output
p {font-style: italic;}	This is font style italics.

font-variant

The font-variant property specifies whether the font will be displayed in small caps. Small caps mean that all letters will be displayed in the capital case, but the font size is smaller than usual. The possible values are 'small-caps' and 'normal'. Let's look at the example below.

With the following CSS,

span {   font-variant:small-caps; }

the HTML code below,

<span>initial in small caps</span> AND LATER IN LARGE CAPS.

renders

initial in small caps AND LATER IN LARGE CAPS.