 | Web Design in a Nutshell, 2nd Edition |  |
The <font> tag is an inline style tag used to specify the size, color, and font face for the enclosed text using the size, color, and face attributes, respectively. It was created as an extension to HTML to give designers more control over the display of text. The dark side of the <font> tag is that it introduces very specific display information into the HTML markup. As noted several times in this book, in an ideal world, style would be kept separate from content. In HTML 4.01, the <font> tag and all its attributes have been deprecated in favor of the superior formatting capabilities of style sheets. Despite this, it continues to be quite popular (even the best authoring tools rely on it heavily), so it isn't likely to go away any time soon. That said, let's look at how the font tag is used.
A single <font> tag may contain all of these attributes as shown:
<FONT FACE="sans-serif" COLOR="white" SIZE="+1">
For an explanation of acceptable values for the color attribute, refer to Chapter 16, "Specifying Color in HTML".
You can use the size attribute within the <font> tag to adjust type size. This attribute is supported by Versions 1.1 and higher of both Navigator and Internet Explorer.
Browsers measure HTML type on a relative scale from 1 to 7, where 3 is the default and will be displayed at the size specified by the user's preferences. These "virtual" sizes are relative, meaning they do not signify actual pixel or point adjustments. Each size is successively about 20 percent smaller or larger than the default size, 3.
The size value can be specified as an absolute value from 1 to 7 or as a relative value by means of a plus or minus sign. When relative values are given, the default value (which is 3, unless otherwise specified with a <basefont> tag) is increased or decreased by that relative amount. Type is never displayed larger than 7 or smaller than 1, even if the relative size results in such a value.
|
Absolute value |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
|
Relative value |
-2 |
-1 |
- |
+1 |
+2 |
+3 |
+4 |
Therefore, <font size="4">block of text</font> is the same as <font size="+1">block of text</font>, and both will result in a block of text that is 20 percent larger than the default text size.
It is interesting to note that when <font> tags are nested, the effects of their relative sizes are not cumulative, but rather are always based on the default or basefont size of the text. Therefore, if the default text size for a document is 3, any text in that document that is enclosed in <font size="+1"> will result in text with a size of 4, even if that text is nested within a paragraph with <font size="5">.
Gives designers some control over type size without resorting to inappropriate tags (such as heading tags) to adjust size.
Overrides viewers' preference for comfortable on-screen reading. By changing sizes, you risk some viewers seeing type that is illegibly small or ridiculously big.
Introduces style information into the HTML document. In addition to not abiding by the HTML standards, it makes it more difficult to make style changes because every single <font> tag needs to be edited individually.
Limit the use of <font size="n"> to small blocks of text, such as copyright information, rather than applying a size adjustment to an entire page.
If your content needs to be found by search engines that look for heading information, do not use the <font size="n"> tag as a substitute for HTML heading tags, which are weighted more heavily.
Internet Explorer 1.0 introduced the proprietary face attribute to the <font> tag, which allows you to specify specific fonts for selected text. This attribute was adopted by Navigator in Versions 3.0 and higher (it does not work in Navigator 2.0 or earlier). If you are certain your audience is comprised of newer browser users, strive to use style sheets for all your page formatting.
The face attribute does not guarantee that the user will see your text in your specified font. Consider it merely a recommendation. Read "Why Specifying Type is Problematic" in Chapter 3, "Web Design Principles for Print Designers" before gleefully sprinkling the <font> tag throughout your documents.
The quote-enclosed value of face is one or more display font names separated by commas as follows:
<FONT FACE="Verdana, Arial, sans-serif">block of text</FONT>
The browser looks at the string of font names until it finds one that is installed on the user's system and can be used for display. If none of the suggested fonts are installed, the default font is used instead.
You can include a generic font family (serif, sans-serif, monospace, cursive, or fantasy) as the last choice in your list, which allows the browser to choose any available font within that class should your named fonts not be found. It's sort of a last-ditch effort to get something like the font you want, without leaving it entirely to chance.
Gives designers some influence over font selection.
Degrades acceptably. If the suggested fonts are not found (or if the tag is not supported), the text is simply displayed in the browser's default font specified by the user.
Font specification (and other stylistic control) is better handled by style sheets.
Not viable for specifying non-western fonts. <font face="fontlist"> uses simple mapping to match identifying character set numbers to character shapes ("glyphs") that may not translate correctly for the font you select.
|  | |
| 10.4. <div> and <span> |  | 10.6. Lists |
Copyright © 2002 O'Reilly & Associates. All rights reserved.