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.

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;}
Stretching font characters

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

Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.