Family Ties - I Shot the Serif - HTML with Style

I Shot the Serif

Family Ties

The first font property we will examine is font-family. From now on I will use a property summary to present CSS properties, similar to the summary I used for HTML elements in previous tutorials. Here is the summary for font-family:

The font-family property

In the summary above, we see that the property called font-family accepts one or more generic or specific family names as values. I'll explain this in a minute. Its initial value depends on the user agent. It applies to all elements, and is inherited. I will explain the meaning of inheritance in a future tutorial.

So what does all that stuff mean? Well, let's take an example to illustrate all of that:

SPAN.special {
  font-family: Arial;
}

To refresh your memory, this is called a ruleset. The SPAN.special bit is a selector, and to be more precise it is a selector that applies to all SPAN elements with a CLASS attribute that has the value special. The font-family: Arial part is called a declaration. font-family is a property, and Arial is its value.

In English, what this tells a browser is to render all of the aforementioned SPAN elements with a font of the family Arial.

You can specify this declaration via the STYLE attribute as well. Here's an example HTML fragment:

<P>Some text in <SPAN STYLE="font-family: Arial">Arial</SPAN></P>

How the above fragment is displayed depends on a lot of factors, most importantly your system. If your computer doesn't have a font called Arial installed, not much will happen.

Specifying multiple font families

Since different computers have different fonts, you can specify a number of different font families for the font family property, separated by commas, in order of preference, like this:

<P>Some text in
<SPAN
 STYLE="font-family: Arial, Helvetica"
>a sans-serif font</SPAN></P>

Since Arial and Helvetica are very similar fonts, and you can be reasonably sure that one of the two will be available to the reader of your document, you'll get pretty much the appearance you want. But what if none of the font families you specified are available? CSS has a solution for that as well. Instead of specific font family names, you can use a so-called generic font family. There are five generic font families: serif, which will always be a serif font, sans-serif, which will always be a sans-serif font, cursive, which will always be a cursive font, fantasy, which will be a reasonably wierd font, and monospace, which will be a font with equal widths for all characters. What fonts each of these correspond to depends on the browser and operating system the document is viewed on, but by using generic font families, you can be sure that a reasonable fallback will be selected. Usually, you will use a generic family as the last alternative in the list. So, to get a sans-serif look for our text, our example would ideally end up like this:

<P>Some text in
<SPAN
 STYLE="font-family: Arial, Helvetica, sans-serif"
>a sans-serif font</SPAN></P>

Note that you can use quotes to delimit family names that contain whitespace or other strange characters, like this:

BODY {
  font-family: "Zapf Chancery";
}

While I'm at it, I might as well mention a tiny little bug: Internet Explorer 3.0 has some serious trouble with the font-family property, and usually stops reading a ruleset after it encounters one. This is unfortunate, but not earth-shattering. The easy fix for this bug is to always put your font-family declarations last in a ruleset, to make sure all the declarations in the ruleset are parsed by IE 3.0.

There. They said you could pick your friends but not your family, but they where wrong. Now let's see what they say about size...

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 20, 1998
Revised: Nov 3, 1998