How to override HTML <FONT SIZE="2"> with CSS

Question

I was given the task of doing a facelift to our current site. I am moderately well versed in CSS so I am converting the bazillion tags to CSS styles and deleting about 2 times that many that were simply not necessary.

It's all going well until I run into a certain product page that is only a wrapper into which other HTML files are pulled by a server.execute(filename) command. (we're using aspx for the wrapper page.)

There are almost 700 of these pages and they all are cursed with this and that. Past editors with FrontPage that only know how to drag pretty things on the screen.

Anyway, I am wondering if there is a way to use CSS in the wrapper page to override the tag behavior so I can make it something sane that fits with the rest of my pages. I'd even be open to something JavaScript that would remove the tags, but that's my less preferred solution. Thanks!

Answer 1

font[size="2"] {
   property: value !important;
   ...
}

The !important after property values is what you're looking for.

Answer 2

You can use the CSS attribute selector to match your font tag:

font[size="2"] {
    font-size: 12px;
    font-weight: bold;
}

Answer 3

If you can - that means if you can ignore IE6 - use the CSS method Eli Grey and James Goodwin propose.

A cleaner, but more tedious way would be to do a intelligent search+replace changing all <font size='2'> to <span class='size_2'> or something. It would get you rid of the crappy code, and work in all browsers.

Answer 4

A simple reset would do for this case, e.g.

font {
    font-size: 100%;
}

Answer 5

Since Internet Explorer ignores the !important rule, you could try a Javascript approach such as the following (uses jQuery) to replace all the FONT elements with SPANs and have the appropriate stylesheets to apply formatting.

$('font').each(function(){
  var fontFree = $('span');
  fontFree.append($(this).contents());
  fontFree.addClass('size_'+$(this).attr('size'))
  $(this).replaceWith(fontFree);
});