Sams Teach Yourself CSS in 24 Hours- P4

Sams Teach Yourself CSS in 24 Hours- P4: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers aswell as some minor ones have increased support for Cascading Style Sheets in the latestversions. Web developers are aware of CSS and the vital role they play in designing greatWeb pages, and presumably you’ve got some idea of how important they are if you’vebought this book.
Nội dung trích xuất từ tài liệu:
Sams Teach Yourself CSS in 24 Hours- P4132 Hour 8 and typeface of the font, respectively. In addition, there are a number of other properties that can be used to further select fonts from within those families. These properties are font-weight, font-variant, font-style, font-stretch, and font-size-adjust. To understand how these properties work, it’s important to understand how CSS views fonts. A font in CSS is one specific instance of several properties: a specific typeface, size, weight, and other variables. So the font 12pt Arial bold italic is different from the font 10pt Arial. They are part of the same font family, of course. It’s helpful to remember that when you declare a font family, you’re actually selecting a group of fonts to be used. Other properties (or browser defaults) will narrow down the specific font. Font families generally include a number of variations on the base font, for example, an italic version of the font. In some cases, you will specify a font combination that simply isn’t available as a distinct variant. The browser will then have to create a variant on the fly by slanting the text to produce italic effects, for example, or by using the closest available equivalent in the font family. The effects produced by various font settings are listed in Table 8.1 for reference; this is because it’s not always clear which property controls which effect. TABLE 8.1 Properties Affecting Font Display Property Effect font-family Selects the typeface family font-size Sets the size of the font font-weight Makes text bold or lighter font-variant Creates “small caps” effect font-style Sets italic font font-stretch Stretches the font horizontally text-decoration (Hour 9) Underlines text color (Hour 9) Changes the color of text line-height (Hour 12) The height of the line (but not the text height) font Sets font-family, font-size, font-weight, font-variant, font-style, and line-height The font-weight Property The font-weight property controls how heavy a font appears—in other words, the thick- ness of the lines used to draw that font, relative to the size of the font. The weight of a Fonts and Font Families 133 font is measured in numbers that range from 100 to 900, in steps of 100. The higher the number, the bolder the font; normal text has a weight of 400 and bold text (as created by the HTML tag) has a weight of 700. 8 Not all font families have specific fonts at all values; in such a situation, the browser will usually use the closest match. For example, if there’s no weight 800 variant for a font, the browser may substitute weight 700. Many browsers support only two to four font-weight values. Figure 8.1 shows how Opera 6 (Windows) displays each font-weight value of Verdana, whereas Figure 8.2 is from Internet Explorer 5.1 (Macintosh). Notice that they differ on whether weights 500 and 600 should be weighted like 400, 700, or somewhere in between. Keep this in mind; it will be important later on.FIGURE 8.1Successive font-weight values ofVerdana font,shown in Opera 6. In addition to numeric values, the font-weight property can take named values, as shown on Table 8.2. The font-weight value is inherited from the containing box if any is set. The default value is normal (400) for most HTML tags; some, such as , , to , and , will default to bold (700).134 Hour 8 FIGURE 8.2 Successive font- weight values of Verdana font, shown in Internet Explorer 5.1 (Macintosh). TABLE 8.2 Values for the font-weight Property Value Effect 100 to 900 Lightest (100) to heaviest (900) font weight bold Same as 700 bolder One step (+100) heavier than the containing box’s font-weight lighter One step (-100) lighter than the containing box’s font-weight normal Same as 400 inherit ...