Question

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

是否有人知道是否有办法允许使用标记定义规则？

更新
由于更改我用于富文本编辑器的控件不是一个选项，我的用户不了解HTML以了解标记与任何其他类型标记之间的区别，我别无选择，只能创建一个黑客来解决我的问题。下面是我用来解决它的代码。这是一个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

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

我也对此感到沮丧。我使用的是一个生成标签的免费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;
}

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

Answer 2

我建议使用自己的样式覆盖CSS，以实现！important属性。

div.MyClass p 
{  
font-size: 0.7em !important; 
}

字体标记在技术上应该覆盖大多数样式，只要它是与原始文本最接近的元素即可。

如果它失败了，可能是由于CSS使用！important属性来覆盖它。

Answer 3

您可以将其转换为元素上的style标记。其中的任何内容都优先于样式表定义的规则。

Answer 4

诚实？获取新的富文本编辑器！ TinyMCE或FCKeditor都是可以选择的。这或者教育您的用户了解他们在编辑器中设置的样式在发布时不一定会以这种方式出现。我曾经使用FCKeditor完成的工作是将其工具栏限制为基础知识，如列表，链接，标题等，没有任何样式选项。

Answer 5

＆LT;字体＆GT;就像任何其他元素一样;它可以使用CSS设置样式。您可以编写CSS以允许字体标记的样式按下列方式向下推：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
    body { color: black}
    a { color: red; font-family: Sans; font-size: 14px;}
    font * { color: inherit; font-family: inherit; font-size: inherit}
    </style>
  </head>
  <body>
    This is outside <a href="#">inside</a> outside. <font color="green" face="Times New Roman" size="20">Outside <a href="#">inside</a> outside</font>.
  </body>
</html>

允许<font>标签覆盖CSS？</font>

5 个答案: