Font-Based Attributes

The CSS attributes that specifically affect fonts (those that affect the appearance of individual characters of text) are font-family, font-style, font-variant, font-weight, and font-size. In addition, the font shorthand property enables you to change multiple font attributes simultaneously. The ways that Microsoft Internet Explorer 5 and Netscape Navigator display most of the attributes covered in this chapter are shown here in Figures 12-1 and 12-2.

click to view at full size.

Figure 12-1. Some CSS formatting in Internet Explorer.

click to view at full size.

Figure 12-2. The same page in Navigator 4.08.

Code Listing 12-1, a simple example of how you can use these attributes, begins with a global style sheet that establishes a series of style declarations for the SPAN element. Figure 12-3 shows how Internet Explorer displays this code. Notice the differences between the text that uses the style definition we created for SPAN and the text that does not.

Code Listing 12-1.

 <HTML> <HEAD> <TITLE>Listing 12-1</TITLE> <STYLE>   SPAN {     font-family: "Arial Western", Verdana, sans-serif;     font-style:   italic;     font-variant: small-caps;     font-weight:  700;     font-size:    18pt;   } </STYLE> </HEAD> <BODY> This sentence is standard text that has no custom style. This sentence is also standard text that has no custom style. <HR> <SPAN>This text uses the custom SPAN style we created.</SPAN> <HR> As you can see, some parts of this paragraph <SPAN>use our  custom SPAN style,</SPAN> and some do not. This paragraph  demonstrates how the two types of text can interact and how  line spacing or wrapping can be affected by mixing styles. </BODY> </HTML> 

click to view at full size.

Figure 12-3. An example of using CSS attributes to affect fonts.

The first attribute in this code's style sheet, font-family, specifies the typeface that Internet Explorer should use when displaying the font. This attribute is expressed as a prioritized list of fonts:

 font-family: "Arial Western", Verdana, sans_serif 

This line of code tells the browser to use the font named Arial Western, if possible. If this font is not available on the user's machine, the Verdana font should be used. If Verdana is not available, the code tells Internet Explorer to use a generic sans-serif font. Internet Explorer supports five generic font types: serif, sans-serif, cursive, fantasy, and monospace. Common examples of these font types are Times, Arial, Script, Ransom, and Courier, respectively. When a font name consists of more than a single word, the name should be enclosed in quotes. Netscape Navigator (at least through version 4) does not support the cursive generic font type.

NOTE
A serif font has small perpendicular lines at the ends of the main letter strokes. These lines, called serifs, can vary in length, thickness, and curvature. Many decorative fonts have long, curving serifs. The term "sans-serif" means "without serifs;" the letters of a sans-serif font are written in plain strokes, without the small perpendicular lines. For example, this letter T appears in a serif font. Notice the serifs at the bottom of the letter and on each end of the letter's top stroke. In contrast, this letter T is in a sans-serif font. A handy trick is to think of serifs as feet—if a font looks like it has feet, it is probably a serif font.

The second style declaration in Code Listing 12-1 includes the font-style attribute, which can be set to normal, italic, or oblique. A normal setting displays the text in roman (standard) type; an italic setting italicizes the text. Internet Explorer displays text with an oblique setting the same as italic. Netscape Navigator currently does not recognize the oblique setting.

The next attribute in the style sheet, font-variant, can be set to either small-caps (short for "small capital letters") or normal. With the small-caps setting, Internet Explorer renders text as all uppercase letters, but slightly smaller than normal capital letters of that font. Netscape Navigator does not recognize the font-variant attribute.

NOTE
Many CSS attributes are not supported by the current version of Netscape Navigator. However, Netscape has announced that the next full version of Navigator (Navigator 5) will be significantly more compliant with the CSS1 specification. You can find fairly good charts showing support by different browsers of all aspects of the CSS specifications at webreview.com/wr/pub/guides/style/style.html . The CSS1 Leader Board at webreview.com/wr/pub/guides/style/lboard.html shows what percentage of the CSS1 specification is supported by different browsers.

You can specify the weight, or thickness, of letters with the font-weight attribute, using the settings normal, bold, bolder, or lighter. The normal setting is the default. The bold setting makes the text somewhat bolder (darker) than its default. The bolder setting makes the text even bolder, whereas lighter makes the text somewhat less bold (lighter) than its default. As an alternative, you can use values in the range 100 to 900, in increments of 100, with 900 being the thickest and 400 the default. 700 is usually equivalent to a setting of bold.

The font-size attribute, which is also used in Code Listing 12-1, lets you control the size of the font. You can set this attribute in any of the following ways:

  • Using an exact size, such as 1pt. See the Units of Measurement section later in this chapter.
  • Using a percentage size relative to the default. For instance, a setting of 200% makes the font twice its normal size.
  • Using one of a set of keywords. Possible keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. These values are relative to the user's font preference settings.
  • Using one of the two relative keywords larger and smaller. These values are relative to the size of the parent element.

    Finally notice the length of the style definition we set up in Code Listing 12-1:

     SPAN {   font-family: "Arial Western", Verdana, sans-serif;   font-style:   italic;   font-variant: small-caps;   font-weight:  700;   font-size:    18pt; } 

If we had used the font shorthand property instead, we could have set up the same style definition with this code:

 SPAN {  font: small-caps italic 700 18pt "Arial Western", Verdana, sans-serif; } 

As you can see, using the font shorthand property can save a great deal of typing. As you learned in Chapter 11, however, shorthand properties are particular about the order in which their attributes are listed. When you use the font shorthand property, the settings of the three attributes font-style, font-variant, and font-weight must precede all other font attributes (although it is not important which of these three appears first). These attributes are optional. Next comes the font-size setting, which is required. Then you can include an optional line-height setting. (We will discuss this attribute in the following section.) Finally you must specify the font-family setting. For any of the optional attributes, you are free to simply omit the settings you don't need.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net