Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 29th of July 2015 04:35:12 AM

10.3. Fonts and Text

The font property has also picked up a few new values in CSS2:


These values give the font property the ability to match the font family, size, weight, and so forth, according to the settings users have specified on their computers. For example, icons on a Macintosh are typically labeled using 9-point Geneva. Assuming that hasn't been changed by the user, any font declaration with a value of icon will result in 9-point Geneva for that text -- as long as the page is viewed using a Macintosh:

SPAN.OScap {font: icon;}  /* will look like icon labels in OS */

On a Windows system, of course, the font would come out different, and under other window managers (like X), it would look different still. The flexibility is certainly interesting, and it allows the author to easily create pages that have an appearance familiar to the user.

10.3.1. New Font Properties

The font section gains two new properties in CSS2. font-size-adjust is intended to help browsers make sure that text will be the intended size, regardless of whether the browser can use the font specified in the style sheet. It is often a problem that authors will call for a font that is not available to the user, and when another font is substituted, it's either too big or too small to read comfortably. This new property addresses that very problem, and should be very useful for authors who want to make sure that their documents are readable no matter what font is substituted.

The other new font property is font-stretch , which allows you to define variable widths for the fonts you use. This is in a block-level tag such as a paragraph <P ALIGN="left">, headline, e.g., <H2 ALIGN="center"> or page division <DIV ALIGN="right">.  Each of these should terminate with a corresponding termination tag </P>, </H2> or </DIV> as appropriate. 

The block-level <CENTER> tag is still a commonly-used alternative (includes its own line breaks).  Use <BLOCKQUOTE> for both-margin indents, <UL> with no list items for left-indents (see below).  similar to setting a character width in a desktop publishing system. The property uses keywords such as ultra-condensed , wider, and expanded. The changes are handled in a fashion similar to font weights, where a table of condensed and expanded font faces is constructed, and the keywords are assigned to various faces. If no face exists, the user agent may try to scale a font on its own, or it may simply ignore font-stretch altogether. Figure 10-13 shows what a font might look like for each possible value of font-stretch.

Figure 10-13

Figure 10-13. Stretching fonts

10.3.2. text-shadow

In terms of text, there is one new property, text-shadow, which has the effect you'd probably expect from its name: you can define a drop shadow of a given color for text. You can even set an offset and a blur radius, which means you can get cool fuzzy shadows, or even glow effects, using this property. We should fully expect to see this property horribly abused the instant it's supported by any browser; for a few examples of why, see the simulations in Figure 10-14.

Figure 10-14

Figure 10-14. Various effects using the text-shadow property

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

is said to be. There are a great many ways to label the heaviness offonts. For example, the font family known as Zurich has a number ofvariants such as Zurich Bold, Zurich Black, Zurich UltraBlack, ZurichLight, and Zurich Regular. Each of these uses the same basic font,but each has a different weight.

So let's say that you want to use Zurich for a document, butyou'd like to make use of all those different heaviness levels.You could refer to them directly through thefont-family property, but you reallyas with the paragraph in the previous example. On the other hand, ifyou supply four color values, you can get a different color on eachside. Any type of color value can be used, from named colors tohexadecimal and RGB values.

P {border-style: solid; border-width: thick;border-color: black rgb(25%,25%,25%) #808080 silver;}

Figure 7-43 shows us varying shades of gray forborders. Thanks to the grayscale nature of this book, I've beensticking mostly to shades of gray, but any color could be used. Ifreproduced on paper.

In effect, this is yet another area where you must remember that total control over document appearance is simply not possible. In this case, it's due to a combination of inconsistent operating system settings and the vagaries of human perception, which is an obstacle no computer is going to overcome any time soon.

It is left to individual authors to decide what chances they wish to take with using named colors, but at least with the specified sixteen colors, there is some moderate hope of consistency. the color to "peek through," so to speak. However, imageformats with an alpha channel, such as PNG, can be partially orwholly transparent, and this will cause the image to be combined withthe background color. In addition, if the image fails to load forsome reason, the user agent will use the background color specifiedin place of the image. Consider how the "starryparagraph" example would look if the background image failed toload, as in Figure 6-26.

Figure 6-26

Figure 6-26. The consequences of a missing background image