Tweaking the FontThe <big>, <small>, and <tt> text. Before I get into the appropriate way to tinker with the font in XHTML code, let's briefly take a look at how things were done prior to CSS. Before style sheets entered the picture, the now phased-out <font> tag was used to control the fonts in web page text. For example, the following HTML will change the size and color of some text on a page: <font size="5" color="purple">this text will be big and purple.</font> As you can see, the size and color attributes of the <font> Following are a few of the main style rules used to control fonts:
The font-family a user's system, the browser can try an alternative. This is important because every user potentially has a different set of fonts installed, at least beyond a core set of common basic fonts (Arial, Times, and so forth). By providing a list of alternative fonts, you have a better chance of your pages gracefully falling back on a known font if your ideal font isn't found. Following is an example of the font-family style used to set the typeface for a paragraph of text: <p style="font-family:arial, sans-serif, 'times roman'"> There are several interesting things about this example. First off, arial is specified as the primary font. Case doesn't matter when specifying the font family, so arial is no different from Arial or ARIAL. Another interesting thing about this code is how single quotes are used around the times roman font name because it has a space in it. The font-size and color style rules are also commonly used to control the size and color of fonts. The font-size style can be set to a predefined size such as small, medium, or large, or you can set it to a specific point size such as 12pt or 14pt. The color style can be set to a predefined color such as white, black, blue, red, or green, or you can set it to a specific hexadecimal color such as #FFB499. Following is the previous paragraph example with the font size and color specified: <p style="font-family:arial, sans-serif, 'times roman'; font-size:14pt; color:green">
The web page given in Listing 5.6 and shown in Figure 5.6 actually still resembles the original <h1> tag. More important, the remaining player information is displayed in navy blue with the description of each piece of information in bold. Listing 5.6. The Hockey Player Sample Page Is Improved with Font Style Rules
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Music City Mafia - Terry Lancaster</title>
</head>
<body>
<p style="font-family:verdana, arial; font-size:18pt; font-weight:bold">16
- Terry Lancaster</p>
<p style="font-family:verdana, arial; font-size:12pt; color:navy">
<img src="tlancaster.jpg" alt="Terry "Big T" Lancaster" /><br />
<span style="font-weight:bold">Nickname:</span> Big T<br />
<span style="font-weight:bold">Position:</span> RW<br />
<span style="font-weight:bold">Height:</span> 6'3"<br />
<span style="font-weight:bold">Weight:</span> 195<br />
<span style="font-weight:bold">Shoots:</span> Left<br />
<span style="font-weight:bold">Age:</span> 40<br />
<span style="font-weight:bold">Birthplace:</span> Nashville, TN
</p>
<hr />
<p style="font-family:verdana, arial; font-size:12pt; color:navy">
<span style="font-weight:bold">Favorite NHL Player:</span> Brett
Hull<br />
<span style="font-weight:bold">Favorite NHL Team:</span> Nashville
Predators<br />
<span style="font-weight:bold">Favorite Southern Fixin:</span> Skillet
Fried Potatoes<br />
<span style="font-weight:bold">Favorite Meat and Three:</span>
Swett's<br />
<span style="font-weight:bold">Favorite Country Star:</span>
Patsy Cline<br />
<span style="font-weight:bold">Favorite Mafia Moment:</span> "Chet
finishing a game with his eyelid completely
slashed through."
</p>
</body>
</html>
Figure 5.6. If you have the Verdana font installed on your computer, it will be used to display the page listed in Listing 5.6.
Following is the code to set the typeface used for the player's name and jersey number text in Listing 5.6: <p style="font-family: verdana, arial; font-size:18pt; font-weight:bold"> If your web browser can find a font named Verdana on a user's system, that font is used. Otherwise, the browser will look for Arial. Figure 5.7 font (usually Times New Roman). Figure 5.7. If you don't have the Verdana font installed, the text from Listing 5.6 appears in Arial or Times New Roman. Because only fonts that each user has on his system show up, you have no real control over which fonts appear on your pages. Furthermore, the exact spelling of the font names is important, and many common fonts go by several slightly different names. This means that the only absolutely reliable choices beyond Times New Roman are Arial (on Windows machines) and Helvetica (on Macintosh machines). Don't be afraid to specify other fonts, but make sure that your pages look acceptable in Times New Roman as well.
|
| |||||||||||||||||||