Controlling Fonts

Font-Family Property

Perhaps most importantly, a font is not the same thing as a typeface:

❑ A typeface is a family of fonts, such as the Arial family.

❑ A font is a specific member of that family, such as Arial 12-point bold.

Example:

p.one {font-family:arial, verdana, sans-serif;}

p.two {font-family:times, “times new roman”, serif;}

p.three {font-family:courier, “courier new”, serif;}

Font-Size Property

The font-size property enables you to specify a size for the font. You can specify a value for this property

in several ways:

❑ Absolute size

❑ Relative size

❑ Length

❑ Percentage (in relation to parent element)

Absolute Size:

The following values are absolute sizes:

xx-small x-small small medium large x-large xx-large

Relative Size:

The following two values are relative sizes:

smaller larger

Length:

Length can be expressed in one of the following units of length:

px em ex pt in cm pc mm

Probably the most common is px for pixels.

Percentage:

A percentage is calculated as a proportion of the element that contains the text:

2% 10% 25% 50% 100%

For example:

p.one {font-size:xx-small;}

p.twelve {font-size:12px;}

p.thirteen {font-size:3pc;}

p.fourteen {font-size:10%;}

font-weight Property

¢The possible values for font-weight are:

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

Example:

p.one {font-weight:normal;}

p.two {font-weight:bold;}

p.three {font-weight:bolder;}

p.four {font-weight:lighter;}

p.five {font-weight:100;}

p.six {font-weight:200;}

The font-style Property

¢The font-style property allows you to specify that a font should be normal, italic, or oblique, and these are the values of the font-style property; for example:

p.one {font-style:normal;}

p.two {font-style:italic;}

p.three {font-style:oblique;}