Override font tag

We had a problem where the content owners were selecting font size from the rich html editor and deploying their content, where as the standard font size across the SharePoint portal was 11px. Problem is when we select font sizes from the html editors it does not allows them to select in pixels, instead they have to select font sizes from 1 through 7. Now the challenge is that we have in map font sizes in to pixels like this.

Font size 1 = 10px
Font size 2 = 11px
Font size 3 = 12px
Font size 4 = 14px
And so on….

I have goggled for some time and got the solution. Here are few links that helped me.
http://www.webmasterworld.com/css/3642874.htm

http://www.ozzu.com/programming-forum/how-override-the-font-tag-with-t74514.html

http://codingforums.com/showthread.php?t=18876

http://www.acquestech.com/2009/01/overriding-inline-css/

http://css-tricks.com/override-inline-styles-with-css/

After looking in to this links I have got two solutions, one which works only for IE
<style type="text/css">
/* For IE*/
font
{
font-size:expression(setFontags(this.currentStyle.fontSize));
}
</style>

<script type="text/javascript">
function setFontags(x)
{
var y={1:9,2:11,3:12,4:14,5:24,6:32,7:48};
return y[x]+'px';
}

</script>

Other which works for IE and Firefox. But the problem with this one is there will be a small flicker to map the font sizes since we had written it in JavaScript.

<script type="text/javascript">
window.onload = function()
{
//debugger;
// Get the (note depreciated) FONT elements
var fonts = document.getElementsByTagName('font');

// Loop through them
for(var i=0; i<fonts.length; i++)
{
// Moz / Opera
// We don't check for removeNamedItem explicitly
// because for some strange reason IE7 acts like the method exists
// but doesn't provide the functionality or return reference to it in a "for prop in" loop.
// Opera supports both methods of monitoring events,
// Opera also makes the text smaller than it should be if we use the same method IE uses
// so we check for the Moz method of monitoring events
// which is known not to work in IE
if( fonts.item(i).addEventListener )
{
//fonts.item(i).attributes.removeNamedItem('size');
if(fonts.item(i).size == 1)
{
fonts.item(i).style.fontSize = "10px";
}
else if(fonts.item(i).size == 2)
{
fonts.item(i).style.fontSize = "11px";
}
else if(fonts.item(i).size == 3)
{
fonts.item(i).style.fontSize = "12px";
}
else if(fonts.item(i).size == 4)
{
fonts.item(i).style.fontSize = "14px";
}
}
// This is how IE7 does it
else
{
if(fonts.item(i).size != "")
{
if(fonts.item(i).size == 1)
{
fonts.item(i).style.fontSize = "10px";
}
else if(fonts.item(i).size == 2)
{
fonts.item(i).style.fontSize = "11px";
}
else if(fonts.item(i).size == 3)
{
fonts.item(i).style.fontSize = "12px";
}
else if(fonts.item(i).size == 4)
{
fonts.item(i).style.fontSize = "14px";
}
}
}
}
}
</script>