css - 允许 标签覆盖 CSS？

Question

我有一些用户生成的内容，我正试图在我的网站上呈现。我正在使用的富文本框编辑器使用 <font /> 呈现字体更改标签，这些标签会被页面上的 CSS 覆盖。

有谁知道是否有办法允许使用 <font /> 定义的规则？标签显示？

更新
由于更改我用于我的富文本编辑器的控件不是一个选项，而且我的用户不了解 HTML 来理解 <font> 之间的区别。标签和任何其他类型的标签，我别无选择，只能创建一个 hack 来解决我的问题。下面是我用来解决它的代码。这是一个更改所有 <font /> 的 jQuery 脚本标记属性到内联 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

晚了一年，但我想我还是会分享。

我也为此感到沮丧。我正在使用生成 <FONT /> 的免费软件 RTE JavaScript 组件标签。替换它并不方便，因为它是给客户端的，而且它是修复此 CSS 覆盖问题的回调。

不幸的是，没有其他解决方案适用于我的情况，所以在思考之后我想到了这个 JavaScript 解决方案:

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;
}

转换字体大小的公式不正确，但足以产生可信的结果。