Разрешить тег <font>переопределить CSS? - PullRequest
Новая
       4

Разрешить тег <font>переопределить CSS?

0 голосов
/ 10 ноября 2008

У меня есть контент, созданный пользователями, который я пытаюсь отобразить на своем сайте. Редактор текстового поля, который я использую, отображает изменения шрифта с помощью тегов <font />, которые переопределяются CSS на странице.

Кто-нибудь знает, есть ли способ разрешить показ правил, определенных с помощью тега <font />?

UPDATE
Поскольку изменение элемента управления, который я использую для своего редактора форматированного текста, не является вариантом, и мои пользователи не знают HTML, чтобы понять разницу между тегом <font> и любым другим типом тега, у меня не было выбора, кроме как создать взломать, чтобы исправить мою проблему. Ниже приведен код, который я использовал для его решения. Это скрипт jQuery, который изменяет все атрибуты тега <font /> на встроенный 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);
    });
})();

Ответы [ 5 ]

4 голосов
/ 04 января 2010

Год опоздал, но думал, что все же поделюсь.

Я тоже был разочарован этим. Я использовал бесплатный JavaScript-компонент RTE, который генерировал теги <FONT />. Его было неудобно заменить, поскольку это было для клиента, и это был обратный вызов, чтобы исправить эту проблему переопределения 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;
}

Формула для преобразования размера шрифта неверна, но достаточно точна, чтобы получить правдоподобные результаты.

2 голосов
/ 10 ноября 2008

Я бы предложил переопределить CSS вашими собственными стилями, которые реализуют атрибут! Important. 

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

Тег шрифта, технически, должен переопределять большинство стилей, если он является ближайшим элементом к необработанному тексту.

Если это не удается, скорее всего, это связано с тем, что CSS использует атрибут! Important для переопределения.

1 голос
/ 10 ноября 2008

Честно? Получите новый текстовый редактор! TinyMCE или FCKeditor оба являются хорошими вариантами. Либо так, либо научите своих пользователей понимать, что стили, которые они устанавливают в редакторе, не обязательно будут отображаться таким образом при публикации. Когда-то, что я сделал с FCKeditor в прошлом, ограничил его панель инструментов основами, такими как списки, ссылки, заголовки и т. Д., Без каких-либо опций стиля.

1 голос
/ 10 ноября 2008

Вы можете преобразовать его в тег style на элементе. Все в этом случае будет иметь приоритет над правилами, определенными таблицей стилей.

0 голосов
/ 10 ноября 2008

просто элемент, как и любой другой; его можно стилизовать с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...