Tutorial 22: The Font of Foulness, Part I: Size Matters
Using larger and smaller
Another idea is to use the smaller and larger
values for font-size. This works fine in Internet Explorer,
with a direct correspondance between FONT relative sizes and
font-size relative sizes. The following example illustrates
this:
<TABLE>
<TR>
<TD>
<SMALL><SMALL>
Foobar SS
</SMALL></SMALL>
</TD>
<TD>
<SPAN STYLE="font-size: smaller"><SPAN STYLE="font-size: smaller">
Foobar ss
</SPAN></SPAN>
</TD>
</TR>
<TR>
<TD>
<SMALL>
Foobar S
</SMALL>
</TD>
<TD>
<SPAN STYLE="font-size: smaller">
Foobar s
</SPAN>
</TD>
</TR>
<TR>
<TD>
Foobar
</TD>
<TD>
Foobar
</TD>
</TR>
<TR>
<TD>
<BIG>
Foobar B
</BIG>
</TD>
<TD>
<SPAN STYLE="font-size: larger">
Foobar l
</SPAN>
</TD>
</TR>
<TR>
<TD>
<BIG><BIG>
Foobar BB
</BIG></BIG>
</TD>
<TD>
<SPAN STYLE="font-size: larger"><SPAN STYLE="font-size: larger">
Foobar ll
</SPAN></SPAN>
</TD>
</TR>
<TR>
<TD>
<BIG><BIG><BIG>
Foobar BBB
</BIG></BIG></BIG>
</TD>
<TD>
<SPAN STYLE="font-size: larger"><SPAN STYLE="font-size: larger">
<SPAN STYLE="font-size: larger">
Foobar lll
</SPAN></SPAN></SPAN>
</TD>
</TR>
<TR>
<TD>
<BIG><BIG><BIG><BIG>
Foobar BBBB
</BIG></BIG></BIG></BIG>
</TD>
<TD>
<SPAN STYLE="font-size: larger"><SPAN STYLE="font-size: larger">
<SPAN STYLE="font-size: larger"><SPAN STYLE="font-size: larger">
Foobar llll
</SPAN></SPAN></SPAN></SPAN>
</TD>
</TR>
</TABLE>
|
Foobar SS
|
Foobar ss
|
|
Foobar S
|
Foobar s
|
|
Foobar
|
Foobar
|
|
Foobar B
|
Foobar l
|
|
Foobar BB
|
Foobar ll
|
|
Foobar BBB
|
Foobar lll
|
|
Foobar BBBB
|
Foobar llll
|
If you're viewing this page with Navigator 4, you'll notice that it
gets the sizes completely wrong; it seems that larger is
interpreted as x-large and smaller as
x-small, no matter what the font size of the parent element
is. So, we're still stuck without a good solution for emulating
FONT elements in CSS.
