CSS Font Properties

For an element,the font-family property is a prioritized list of font family names and/or generic family names . The browser will use the first value it recognizes.

A font family is designed to be used in combination and exhibiting similarities in design which cotains a group of fonts,

One member of the family may be bold, another italic, another small caps or using ondensed. Font family names include "Helvetica", "New Century Schoolbook", and "Kyokasho ICA L". Font family names are not restricted to Latin characters. Font families may be of different categories: those with or without serifs, those that resemble handwriting,those whose characters are or are not proportionally spaced, those that are fantasy fonts, etc.

CSS Code

body
{
font-family: courier, serif
}
p
{
font-family: arial, "lucida console", sans-serif
}
<p style="font-family: arial, 'lucida console', sans-serif">

Font Style

Whether the text is to be rendered using a normal, italic, or oblique face,the font style is used. Italic is a more cursive companion face to the normal face, but not so cursive as to make it a script face. Oblique is more commonly used as a companion face to sans-serifand slanted form of the normal face . This definition avoids having to label slightly slanted normal faces as oblique, or normal Greek faces as italic. The font-style property sets the style of a font.

CSS Code

body
{
font-style: italic
}

Font Variant

Whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters,the font variant is used. A particular font property is used to request an appropriate font and may contain only normal, only small-caps, or both types of glyph and, if the font contains both variants, the appropriate glyphs.

p
{
font-variant: normal
}

Font Weight

The font weight used to render the text like the boldness or lightness of the glyphs, relative to other fonts in the same font family.

CSS Code

p
{ font-weight: bolder
}

Font Size

To set the size of the font from baseline to baseline, when set solid (in CSS terms, this is when the 'font-size' and 'line-height' properties have the same value), the font size is used .

CSS Code

body
{
font-size: x-large
}

p
{
font-size: 20px
}

The follwing table describe the font Properties:

Property	Description	values	Sample Code
font	Sets multiple font properties	font-family font-size font-weight font-style font-variant
font-family	Sets the font-name	family-name generic-family	p {font-family: verdana,arial} p {font-size: 10pt; font-family: arial}
font-size	Sets the size of the text	smaller larger xx-small x-small small medium large x-large xx-large	P {font: 12pt arial} P {font: 70% sans-serif} P {font: bold italic large Verdana}
font-weight	Sets the weight of the text	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	p{font-weight: bold}
font-style	Sets the style of the text	normal italic oblique	p{font-style: italic}
font-variant	Sets the font variant	normal small caps	h2 {font-variant: small-caps}