Font Properties

 

Property Valid Values Sample Usage Applies to Inherited?
font-family [ [ family-name | generic-family ], ]* [ family-name | generic-family ] { font-family: Verdana, MS Sans Serif; } all elements yes
font-style normal | italic { font-style:italic; } all elements yes
font-variant normal | small-caps { font-variant:small-caps: } all elements yes
font-weight normal | bold { font-weight:bold; } all elements yes
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentage |length { font-size:12pt; } all elements yes
font [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family { font: bold 12pt Arial; } all elements yes

 

Font

The font property can set the style, weight, variant, size, line height and font:

font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic style a bold

weight a normal variant a relative size a line height of 1.4em and the

font to Verdana or another sans-serif typeface.

 

Font -Family

You can set what font will be displayed in an element with the fontfamily property.

There are 2 choices for values:

  • family-name
  • generic family

If you set a family name it is best to also add the generic family at the

end. As this is a priortized list. So if the user does not have the specified

font name it will use the same generic family. (see below)

font-family: Verdana, sans-serif;

 

 

Font Size

You can set the size of the text used in an element by using the fontsize

property.

 

font-size: value;

 

There are alot of choices for values:

  • xx-large
  • x-large
  • larger
  • large
  • medium
  • small
  • smaller
  • x-small
  • xx-small
  • length
  • % (percent)

There is quite a bit to learn about font sizes with CSS so, I am not even

going to try to explain it. Actually there are already some great resources

on how to size your text.

 

 

Font Style

You can set the style of text in a element with the font-style property

font-style: value;

 

 

 

Possible values are

  • normal
  • itailc
  • oblique

 

Font Variant

You can set the variant of text within an element with the font-variant

property

font-variant: value;

 

Possible values are

  • normal
  • small-caps

 

 

Font Weight

You can control the weight of text in an element with the font-weight

property:

 

font-weight: value;

Possible values are

  • lighter
  • normal
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • Bold

bolder

 

 

 

 

Registration


A password will be e-mailed to you.

Feedback Form

Name (required)

Email (required)

Feedback