CODEWITHSUNDEEP
htmlcss
sazr
sazr

Reputation: 25938

Font Size Attribute not in pixels?

I am trying to display old HTML2 in modern browsers. The (poorly created) HTML3 code contains the font HTML element with the size attribute. The size of the text was defined in pixels, so size="14" means the user wants the text to be 14px in size.

The W3School documentation specifies that the valid values for the size attribute can only be these "1,2,3,4,5,6,7,+1,+2,+3,+4,+5,+6,+7,-1,-2,-3,-4,-5,-6,-7". So it seems that the font size attribute unit's are not in pixels but em or something?

Is there a way to get the font element to show the font text size in pixel units?

I have tried the following but they dont work in Safari browser: 

<font size="14">test</font>    // displays in huge text(its not 14px in font size)
<font size="14px">test</font>  // looks the same as line 1
<font size="14pt">test</font>  // looks the same as line 1
<font size="14em">test</font>  // On Firefox the font size is 14px(correct) but on Safari it looks the same as line 1
<font size="14%">test</font>   // looks the same as line 1

Maybe if I try to change the DTD of the HTML file it will read HTML3 code?

Upvotes: 0

Views: 3271

Answers (3)

brandwaffle
brandwaffle

Reputation: 1262

As you probably know, the tag has been deprecated, so chances are good you're just going to see weirder and weirder behavior from various modern browsers since there aren't really any 'standards' anymore for how to render it.

Since it seems that you have to go in and change the code anyway, I'd highly recommend switching to CSS, even if it's as simple as adding a simple style tag like this:

<style type="text/css">
  body {
    font-size: 14px;
  }
</style>

You can also look at doing a few find and replaces in the code, for example replacing all instances of 'font' with 'div' or 'p' as is appropriate. Then you can just create a single style rule for that type of element, and go from there. 

<style type="text/css">
  p {
    font-size: 14px;
  }
</style>

For an additional degree of control, rather than just replacing all the size="14" stuff with nothing, you could find and replace to get something like class="myclass" and then style that particular class.

<style type="text/css">
  p.myclass {
    font-size: 14px;
  }
</style>

It might be a little more work right now (but not much, I swear!), but if the point is to get the code running on modern browsers, it's probably worth it. I don't think changing the DTD will help much in this case either. Check out this forum http://www.sitepoint.com/forums/showthread.php?607459-Can-t-change-font-using-Font-tag for more info.

Upvotes: 1

BoltClock
BoltClock

Reputation: 724462

Is there a way to get the font element to show the font text size in pixel units?

No, you cannot set a pixel value for the size attribute in <font>. The range of values maps to arbitrary, unspecified sizes, and you can't specify anything other than those ranges.

You can use inline CSS via the style attribute instead, as Lee's comment suggests. The <font> element supports it, just like the other elements.

Or, you know, just use a real stylesheet.

Maybe if I try to change the DTD of the HTML file it will read HTML2 code?

Not really relevant to my answer, but the <font> element did not exist in HTML 2.0. It was only defined (if you will) in HTML 3.2, then deprecated in HTML 4.0 and XHTML, before disappearing altogether from HTML5.

Changing the doctype definition won't change the way the browser parses and displays the HTML. The markup version doesn't affect the way it's rendered, at least so far.

Upvotes: 1

Jeremy Wiggins
Jeremy Wiggins

Reputation: 7299

As you mentioned, w3schools states that the size attribute is deprecated and no longer supported. It only supported a numeric value anyway, so trying to hack in px, em, etc. won't produce any results.

The recommended approach is to use CSS (and modern/supported HTML elements, such as paragraphs or divs). Using CSS in some fashion is the only way you're going to be able to achieve your desired effect.

<p style="font-size:14px">test</p>

Upvotes: 0

Related Questions