Tutorial 22: The Font of Foulness, Part I: Size Matters - HTML with Style | 7

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>

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.

https://www.internet.com/

Legal Notices.

URL: https://www.webreference.com/html/tutorial22/6.html

Produced by Stephanos Piperoglou
Created: June 14, 2000
Revised: June 15, 2000