Tweaking the Font
| The <big>, <small>, and <tt> tags give you some rudimentary control over the size and appearance of the text on your pages. However, there may be times when you'd just like a bit more control over the size and appearance of your 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> tag made it possible to alter the font of the text without too much effort. Although this approach worked fine, it was replaced with a far superior approach to font formatting thanks to CSS style rules. Following are a few of the main style rules used to control fonts:
The font-family style rule allows you to set the typeface used to display text. You can and usually should specify more than one value for this style (separated by commas) so that if the first font isn't available on 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 uses these font style rules to improve on one of the earlier hockey-player examples and provide some text formatting. The name and jersey number of the player are displayed in a more exacting font that 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="/books/4/158/1/html/2/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 shows how the page would look on a computer that didn't have Verdana installed but did have the Arial font. If neither of those fonts can be found, the browser will display the text using the default 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.
|
EAN: 2147483647
Pages: 345