|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Working with Fonts and CSSby Eric A. Meyer and Apple Developer Connection
The ability to customize fonts -- in Mac OS, in word processing documents, in Web pages -- is really nothing new. However, when it comes to changing fonts on Web pages, the mechanism is decidedly less intuitive and certainly less than easy.
Having to litter a Web page with
Basic Font Selection
Declaring the use of fonts is very easy in CSS. The general syntax is:
Let's assume that you wish all headings to be rendered using Helvetica. To do this, you would write:
Of course, you should consider that not every user will have Helvetica available. Perhaps the font was removed by the user, or corrupted through some means. By listing more fonts, the browser is able to choose the first available font in the list.
Given the rule above, a browser will look for Helvetica first. If it does not find Helvetica in the font table, it will look for Arial. If Arial is not available, the browser next searches for Geneva. If it cannot find Geneva either, then it will use the default font, the same text it uses to display unstyled elements.
This ability to provide a list of alternative fonts is also useful in situations where a page contains unusual characters that may not appear in all fonts. Assume you have a page where some of the headings contain a few characters of Japanese Kanji. These will not appear in any normal Western font such as Helvetica. Thus the author of this page might create the following rule:
In this case, the Western characters will be drawn from one of the first three fonts, and the Kanji will be taken from the last. Note that it is perfectly possible to reverse the order so that the Asian font is first in the list:
Here, the browser will look first to Kanji2 for all of the characters on the page. If it does not match a character, then it will look for that character in the next font on the list. Thus, the vast majority of the page, which is in a Western language, will be drawn from Helvetica after failing to match any of the character in Kanji2.
When it comes right down to it, the responsibility for creating a list of similar-looking fonts falls to the author, not the browser. It is possible to list alternatives which look nothing alike. For example:
This is of course not recommended, but it is still possible.
In cases where a font's name uses more than one word, the font name must be quoted. The simplest case is a multi-word font name like New Century Schoolbook:
Note that, in contrast to traditional American English, the commas are placed outside the quotation marks. Although double-quotation marks are more common, single-quotation marks are also acceptable.