Question

I have some user generated content I’m trying to render on my site. The rich text box editor I’m using renders font changes using <font /> tags, which are overridden by CSS on the page.

Does anyone know if there is a way to allow rules defined using the <font /> tag to show through?

UPDATE
Since changing the control I’m using for my rich text editor is not an option and my users have no knowledge of HTML to understand the difference between a <font> tag and any other type of tag, I had no choice but to create a hack to fix my problem. Below is the code I used to solve it. It’s a jQuery script that changes all <font /> tag attributes into inline CSS.

(function() {
    $('font[size]').each(function() {
        var fontSize = this.size;
        if (fontSize == 1) {
            $(this).css("font-size", 8);
        } else if (fontSize == 2) {
            $(this).css("font-size", 9);
        } else if (fontSize == 3) {
            $(this).css("font-size", 11);
        } else if (fontSize == 4) {
            $(this).css("font-size", 15);
        } else if (fontSize == 5) {
            $(this).css("font-size", 20);
        } else if (fontSize == 6) {
            $(this).css("font-size", 25);
        }
    });
    $('font[face]').each(function() {
        $(this).css('font-family', this.face);
    });
    $('font[color]').each(function() {
        $(this).css('color', this.color);
    });
})();

Answer 1

A year late, but thought I’d share nonetheless.

I was frustrated by this, as well. I was using a freeware RTE JavaScript component that produced <FONT /> tags. It wasn’t convenient to replace it, as it was for a client and it was a callback to fix this CSS override problem.

Unfortunately, none of the other solutions worked in my case, so after thinking I came up with this JavaScript solution:

var fontEl=document.getElementsByTagName("font");
for(var i=0;i<fontEl.length;i++) {
    var f = fontEl[i];
    if(f.size)
        f.style.fontSize=(Math.round(parseInt(f.size)*12*0.6)).toString()+'px';
    if(f.face)
        f.style.fontFamily=f.face;
    if(f.color)
        f.style.color=f.color;
}

The formula for converting font size is incorrect, but accurate enough to produce believable results.