HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [76]
Macs display yet another variation because the fonts listed here aren’t actual fonts. Instead, they’re virtual fonts. A standards-compliant browser promises to select an appropriate stand in. For example, if you choose sans serif, one browser may choose to use Arial. Another may choose Chicago. You can always use these generic font names and know the browser can find something close, but there’s no guarantee exactly what font the browser will choose. Still, it’s better than nothing. When you use these fonts, you’re assured something in the right neighborhood, if not exactly what you intended.
Figure 2-4: Windows and Linux disagree on fantasy.
Making a list of fonts
This uncertainty is frustrating, but you can take some control. You can specify an entire list of font names if you want. The browser tries each font in turn. If it can’t find the specified font, it goes to the next font and on down the line.
You might choose a font that you know is installed on all Windows machines, a font found on Macs, and finally one found on all Linux machines. The last font on your list should be one of the generic fonts, so you’ll have some control over the worst-case scenario.
Table 2-1 shows a list of fonts commonly installed on Windows, Mac, and Linux machines.
Table 2-1 Font Equivalents
Windows
Mac
Linux
Arial
Arial
Nimbus Sans L
Arial Black
Arial Black
Comic Sans MS
Comic Sans MS
TSCu_Comic
Courier New
Courier New
Nimbus Mono L
Georgia
Georgia
Nimbus Roman No9 L
Lucida Console
Monaco
Palatino
Palatino
FreeSerif
Tahoma
Geneva
Kalimati
Times New Roman
Times
FreeSerif
Trebuchet MS
Helvetica
FreeSans
Verdana
Verdana
Kalimati
You can use this chart to derive a list of fonts to try. For example, look at the following style:
p {
font-family: “Trebuchet MS”, Helvetica, FreeSans, sans-serif;
}
This style has a whole smorgasbord of options. First, the browser tries to load Trebuchet MS. If it’s a Windows machine, this font is available, so that one displays. If that doesn’t work, the browser tries Helvetica (a default Mac font). If that doesn’t work, it tries FreeSans, a font frequently installed on Linux machines. If this doesn’t work, it defaults to the old faithful sans serif, which simply picks a sans serif font.
Note that font names of more than one word must be encased in quotes, and commas separate the list of font names.
The death of the font tag
There used to be a tag in old-school HTML called the tag. You could use this tag to change the size, color, and font family. There were also specific tags for italic (), boldface (), and centering (
Don’t get too stressed about Linux fonts. It’s true that the equivalencies are harder to find, but Linux users tend to fall into two camps: They either don’t care if the fonts are exact, or they do care and they’ve installed equivalent fonts that recognize the common names. In either case, you can focus on Mac and Windows people for the most part, and, as long as you’ve used a generic font name, things work okay on a Linux box. Truth is, I mainly use Linux, and I’ve installed all the fonts I need.
The Curse of Web-Based Fonts
Fonts seem pretty easy at first, but some big problems arise with actually using them.
Understanding the problem
The problem with fonts is this: Font resources are installed in each operating system. They aren’t downloaded with the rest of the page.