Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 23rd of August 2017 07:23:10 PM

10.3. Fonts and Text

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

caption
icon
tags can list multiple fonts in order of preference.  The list shouldinclude a generic font family as a last resort, e.g.
   <FONT FACE="Creepy, Times New Roman, serif">
Generic font families include serif, sans-serif, monospace,cursiveand fantasy

Note that as of HTML 4, you are encouraged to use style sheets insteadof these in-line font manipulations, but these tags work fine. 
  menu message-box small-caption status-bar

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 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.

If you wanted to make sure that a document uses italic text in familiar ways, you could write a style sheet like this:

P {font-style: normal;}
EM, I {font-style: italic;}

As we can see in Figure 5-25, these styles would make paragraphs use an upright font, as usual, and cause the EM and I elements to use an italic font -- again, as usual.

<DIV> <P>This paragraph is contained inside a DIV which is 400px wide, so the first line of the paragraph is indented 20px (400 * 5% = 20). Subsequent lines within the same element are not indented,<BR> even if they follow a<BR> line-break.</P> <P>Once again, the first line of this paragraph is indented by 20px, but other lines in the same element are not.</P> </DIV>
Figure 4-8

Figure 4-8. Text-indenting and line breaks

you. It seems completely wrong to allow the top inner edge to be higher than the top outer edge, for example, but with a negative top margin, that's exactly what you get -- just as negative margins on normal, nonfloated elements can make them wider than their parents. The same is true on all four sides of a floated element's box: set the margins to be negative, and the content can overrun the outer edge without technically violating the specification.

There is one important question here, which is this: what happens to the obvious property to turn to is width. Similarly, height will let you declare a specific height for a positioned element.

width

WARNING

Percentage values refer to the width of the containing block.

colors.

Contrary to what some browser companies might have you believe, you are limited in the range of named colors available. For example, setting a color to "mother-of-pearl" isn't going to work, because it isn't a defined color. (Well, not yet, at any rate.) Technically speaking, there are no defined colors, but there are 16 colors that are suggested by the specification and that all major browsers recognize: