| Home Web | Top Bottom | Contents Prev Next |
The <font> Tag
The face Attribute
The color Attribute
The size Attribute
<font> is an Inline Tag
Example
Attributes: face="font-face-list" color="color" size="size" Contents: Inline elements
Before CSS came along, the <font> tag provided the only way to control the font face, text color and text size, except that you can specify a default text color for the entire page in the text attribute of <body>.
The face attribute lets you choose a font face for the page. You can specify the name of any font. But the user must have that font installed on his/her computer. Otherwise, the default font is used.
You can specify a list of several fonts. The browser will use the first one in the list if that font is installed. Otherwise, it tries the second one in the list, and so on. The first one that is found is used. If none of the fonts in the list are installed, the browser uses the default font.
|
Although you can choose any font on your system, it's likely that many of your users won't have your more unusual fonts installed. Here is a list of fonts you can be fairly sure will be available on most of your users' machines. Some are more likely found on PCs, while others are more common on Macs. Sans-serif fonts: Arial (PC), Helvetica (Mac), Verdana (both) Serif fonts: Times New Roman (PC), Times (Mac), Georgia (both) Monospace fonts: Courier New (PC), Courier (Mac) Other fonts: Comic sans ms (both) In general, include a list of fonts. If you want a sans-serif font, for example, use: face="arial,helvetica,verdana" It's fine to use an unusual font that you happen to like, but remember that many of your visitors won't have that font installed. Unless you're happy with the default font for these visitors, be sure to specify at least one of the common fonts from this list as alternates. |
color specifies the color of the text. You can specify the name of one of the 16 widely-recognized colors (eg., color="white"). Or you can specify the color as a 6-hex-digit value preceded by a # character (eg., color="#99ee00"). MSIE and Netscape also recognize the names of the 140 Netscape colors such as skyblue, but it's better to use the hex code because more browsers recognize them.
My color chart shows the 140 Netscape colors, the 16 widely-recognized colors and the web-safe colors (this link opens in a new window). The web-safe colors are more likely to look good when viewed on computers set at 256 colors than are the Netscape colors.
size specifies the size of the text. Only seven sizes are available, and are designated by the numbers 1-7. The default size is 3. 1-2 are smaller sizes, and 4-7 are larger sizes:
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
Because <font> is an inline tag, its legitimate contents can only include other inline items: text, inline tags, and most empty tags such as <img> and <br>. To set an entire site in a sans-serif font, for example, you have to code like this:
<body> <p> <font face="arial,helvetica"> Text </font> </p> <p> <font face="arial,helvetica"> Text </font> </p> . . . </body>
Obviously, this is very cumbersome, and it's very hard to change if you decide you want the set the page in a different font.
Existing browsers do not enforce the rule that <font> cannot include block tags (exception: Netscape enforces the rules in tables). Almost everyone who uses <font> tags bends the rules and code like this:
<body> <font face="arial,helvetica"> <p> Text </p> <p> Text </p> . . . </font> </body>
This works fine in existing browsers. Use this method if you like, but be forewarned that some future browser may enforce the rules and refuse to apply your chosen fonts, colors and sizes. And remember that you'll get a long list of error messages if you validate your page.
Here's your chance to play with the <font> tag. Try various faces, colors and sizes. Note that it's perfectly acceptable to nest <font> tags inside other <font> tags.
Be sure to validate this code to see what error is reported for the <p> tag that's inside a <font> tag.
| Home Web | Top Bottom | Contents Prev Next |