The Font Properties

How to use some of the css font properties

DHTML Pit Stop | CSS Index | CSS Properties | HTML List

Home/DHTML/CSS/Font Properties

Here are some explanations and examples of the css font properties.

Now we have made it to the font properties. These do many of the things the <FONT> tag does for us.

font-family

Possible Values:
name of font

The font-family property defines the type of font shown on the screen. The default is whatever the browser uses normally, which tends to be Times New Roman. If you want to change the font to Arial, for instance, you would write this:

<DIV style="font-family:Arial">The font for this section is Arial.</DIV>

And you would get the text with an Arial font:

The font for this section is Arial.

Before you get too crazy with it, remember that the viewer must have the font installed on their computer for this to work. So stick with the most common fonts for the most part.....

font-size

Possible Values:
number of pixels
percentage

You probably have guessed this one already, but I'll tell you anyway......The font-size property defines size of the font shown on the screen. The default is medium. So, to change your font to a size of 40 pixels, you would do this:

<DIV style="font-size:40px">The font is 40 pixels in size.</DIV>

And get this!

The font is 40 pixels in size.

font-style

Possible Values:
normal
italic
oblique

I know, it would be simpler to just use the <I> tag, but since the property exists......here is a sample:

<DIV style="font-style:italic">The font is italic.</DIV>

And guess what you get..............?

The font is italic.

font-variant

Possible Values:
normal
small-caps

The only use I see for this one so far is that it lets you write in small caps if you want to. So, if you want to write in small caps, do this:

<DIV style="font-variant:small-caps">The font is small-caps.</DIV>

And now you have.....small caps!

The font is small-caps.

font-weight

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

Was the list long enough for you? Yep, this lets you control how bold the font is. The only problem I've had is that the number values (100-900) don't seem to have any difference from one to the next one at some points. I guess it will be fixed eventually....Here's one that does work, though:

<DIV style="font-weight:900">The font is really bold.</DIV>

Now see how bold you can be!

The font is really bold.

Well, that's the section on the font properties, the next section is on Background and Color Properties.

By: John Pollock