10.3. Fonts and Text

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

caption
icon
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. Stretching fonts

10.3.2. text-shadow

In terms of text, there is one new property, text-shadow, which
to 255. In fact, 255 in decimal is equivalent to
FF in hexadecimal, which explains a lot about how
this method works. It's really the same as the last method: it
just uses a different number system. If you have to pick between the
two, use whichever makes you more comfortable.

So, similar to the way you can specify a color using three numbers
from
to 255, you can specify one using three hex pairs. If you have a
calculator that converts between decimal and hexadecimal, then making
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. Various effects using the text-shadow property

the SPAN text (which is set to be
bolder) will inherit the value of
100 and then evaluate to the next-heaviest face,
which is the Bold face and which has a numerical weight of
700. Figure 5-11 shows us the
visual result of all this.

Figure 5-11. Greater weight will usually confer visual boldness

Let's take this all one step further, and add two more rules,
plus some markup, to illustrate how all this works (see Figure 5-12 for the results):

background-color

The background is the area of the content box and the padding and is
always behind the foreground of the element. Therefore, the declared
background color is applied to both the element's content box
and its padding, as illustrated in Figure 6-14: