SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css equivalent for font size attribute

    What's the CSS equivalent for the <font size=-2>?

    I know about xx-small, x-small, small, etc. (I have the CSS2.1 spec at hand), and I know about that "font-size: smaller" is equivalent to <font size=-1>.

    However, the only way I know how to duplicate <font size=-2> is to apply "font-size: smaller" twice: <span style="font-size: smaller"><span style="font-size: smaller">, which is ugly to say the least. And since I can't find a way to apply it twice on the same element, I can't rely on an external stylesheet.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try using % or em's:
    Code:
    .small {
    font-size: 8px/%/em/ ;
    }

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, ohee Beat me to it Egor

    <font size=-2> = app 10px or .6em depends on browser and font type

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	body,.fontsize,.fontsizeem{font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	}
    	.fontsize,.fontsizeem{
    	font-size:10px;
    	color:#000000;
    	margin:0px;
    	padding:0px;
    	text-align:left;
    	}
    	.fontsizeem{
    	font-size:0.6em;
    	}
    	</style>
    </head>
    <body>
    <p class="fontsize">12345</p>
    <p class="fontsizeem">12345</p>
    <font size="-2">12345</font>
    </body>
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But what if I have nesting font elements? For example:

    HTML Code:
    <font size="4">A<font size="-2">B</font>C</font>
    The CSS 2 spec says that the scaling factor between font sizes is 1.2 (120%), but the CSS 2.1 spec revised that:

    "In CSS2, the suggested scaling factor for computer screen between adjacent indexes was 1.2 which still created issues for the small sizes. The new scaling factor varies between each index to provide better readability."

    which is why I'm wondering if I should rely on percentages.

    BTW, I'm actually not creating a webpage - I'm just creating some sort equivalent of HTML Tidy. So it's not me who's using the font element.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes % and em look a bit strange at first, p takes size from body, span takes size from P

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	body,.fontsize,.fontsizeem{font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	}
    	.fontsize,.fontsizeem{
    	font-size:10px;
    	color:#000000;
    	margin:0px;
    	padding:0px;
    	text-align:left;
    	}
    	.fontsizeem{
    	font-size:.6em;
    	}
    	.sizep{font-size:2em;}
    	.sizespan{font-size:2em;}
    	</style>
    </head>
    <body>
    <p class="fontsize">12345</p>
    <p class="fontsizeem">12345<span > 12345</span></p>
    <font size="-2">12345</font><br /><br /><br />
    <font size="4">AAAAAAA<font size="-2">BBBBBBB</font>CCCCCCCCCCCC</font><br /><br /><br />
    <p class="sizep">AAA<span class="sizespan">BBB</span>CCC<span class="sizespan">BBB</span></p>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •