Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:21:43 PM

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 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 XML is derived from SGML, and so was HTML. So in essence, the current infrastructure available today to deal with HTML content can be re-used to work with XML. This is a very big advantage towards delivering XML content using the software and networking infrastructure already in place today. This should be a big plus in considering XML for use in any of your projects, because XML naturally lends itself to being used over the web.

Even if clients don't support XML natively, it is not a big hindrance. In fact, Java with Servlets (on the server side) can convert XML with stylesheets to generate plain HTML that can be displayed in all web browsers.

Using XML to pass parameters and return values on servers makes it very easy to allow these servers to be web-enabled. A thin server side Java layer might be added that interacts with web browsers using HTML and translates the requests and responses from the client into XML, that is then fed into the server.

XML is totally extensible

By not predefining any tags in the XML Recommendation, the W3C allowed developers full control over customizing their data as they see fit. This makes XML very attractive to encoding data that already exists in legacy databases (by using database metadata, and other schema information). This extensibility of XML makes it such a great fit when trying to get different systems to work with each other.

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.

A:link {color: maroon;} /* a good dark red color */

Any H2 which should be dark blue would then bemarked up as <H2CLASS="dkblue">...</H2>.


It's actually better to pick classnames that are descriptive of the type of information containedwithin, not of the visual effect you're trying to achieve atthe moment. For example, let's say that we want the dark blue

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high as possible.

Subject to the restrictions introduced by the previous seven rules, of course. Historically, browsers aligned the top of a floated element with the top of the line box after the one in which the image's tag appears. Rule 8, however, implies that its top should be even with the top of the same line box as that in which itswould be too easy.)

Once again, we present some color equivalents in Table 3-3.

Table 3-3. Hexadecimal Equivalents for Common Colors