Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 125

Mechanics

Finding font elements is simple. Strict validation will sniff them all out, or you can just search for <font or
</font> . Once you've found them, convert their attributes to CSS properties, as shown in Table 4.2 .

Table 4.2. Fonts

HTML Font Attribute CSS Property

size font-size

face font-family

color color

The values for face and color attributes are also legal values for the font-family and color properties,
respectively. However, for size , one additional change is needed. CSS uses keywords where font uses
numbers. Table 4.3 shows the mappings between font numbers and CSS keywords.

Table 4.3. Font Sizes

HTML size Attribute Value CSS font-size Property Value

1 xx-small

2 x-small

3 small

4 medium

5 large

6 x-large

7 xx-large

59% (approximate) -3

70% (approximate)

-2

-1 smaller

+1 larger

144% (approximate)

+2

172% (approximate)

+3

You're likely to encounter two kinds of font tags: those that are nestled snug against other tags and those that
appear in the middle of text. The first case is more common. Typically it looks something like this:

<h3><font size="-1">Random Sites Around the Web</font></h3>

Sometimes the font element is wrapped around another element instead of inside it: