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.
