Cascading Style Sheets: The Definitive Guide, Second Edition

Stretching and Adjusting Fonts

There are two font properties that appear in CSS2, but not in CSS2.1. They’ve been dropped from CSS2.1 because, despite being in the specification for years, no browser has bothered to implement either one. The first allows for the horizontal stretching of fonts, and the second allows for intelligent scaling of substituted fonts when the author’s first choice is not available. First, let’s look at stretching.

font-stretch

Values

normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

Initial value

normal

Applies to

all elements

Inherited

yes

As you might expect from the value names, this property is used to make a font’s characters fatter or skinnier. It behaves very much like the absolute-size keywords (e.g., xx-large) for the font-size property, with a range of absolute values and two values that let the author alter a font’s stretching up or down. For example, an author might decide to stress the text in a strongly emphasized element by stretching the font characters to be wider than their parent element’s font characters, as shown in Figure 5-21:

strong {font-stretch: wider;}

Figure 5-21. Stretching font characters

Tip

Figure 5-21 was altered using Photoshop, since web browsers do not support font-stretch as of this writing.

The similarly unimplemented ...