Как переопределить HTML <FONT SIZE = "2"> с помощью CSS

Question

Мне дали задание сделать подтяжку лица на нашем текущем сайте. Я достаточно хорошо разбираюсь в CSS, поэтому я конвертирую теги bazillion в стили CSS и удаляю примерно в 2 раза больше, чем просто не нужно.

Все идет хорошо, пока я не наткнулся на определенную страницу продукта, которая является лишь оболочкой, в которую другие HTML-файлы помещаются командой server.execute (filename). (мы используем aspx для страницы-обертки.)

Существует почти 700 таких страниц, и все они прокляты тем и этим. Предыдущие редакторы с FrontPage, которые знают, как перетаскивать красивые вещи на экран.

В любом случае, мне интересно, есть ли способ использовать CSS на странице-обертке, чтобы переопределить поведение тега, чтобы я мог сделать его чем-то вменяемым, подходящим для остальных моих страниц. Я даже был бы открыт для чего-то JavaScript, который убрал бы теги, но это мое менее предпочтительное решение. Спасибо!

Answer 1

font[size="2"] {
   property: value !important;
   ...
}

Значения свойства !important после - это то, что вы ищете.

Answer 2

Вы можете использовать селектор атрибутов CSS , чтобы соответствовать вашему тегу шрифта:

font[size="2"] {
    font-size: 12px;
    font-weight: bold;
}

Answer 3

Для этого случая можно выполнить простой сброс, например,

font {
    font-size: 100%;
}

Answer 4

Поскольку Internet Explorer игнорирует правило !important, вы можете попробовать подход Javascript, такой как следующий (использует jQuery), чтобы заменить все элементы FONT на SPAN и иметь соответствующие таблицы стилей для применения форматирования.

$('font').each(function(){
  var fontFree = $('span');
  fontFree.append($(this).contents());
  fontFree.addClass('size_'+$(this).attr('size'))
  $(this).replaceWith(fontFree);
});

Answer 5

Если вы можете - это значит, если вы можете игнорировать IE6 - используйте метод CSS, предложенный Эли Греем и Джеймсом Гудвином.

Более понятным, но более утомительным способом было бы сделать интеллектуальный поиск + заменить, изменив все <font size='2'> на <span class='size_2'> или что-то еще. Это избавит вас от дрянного кода и будет работать во всех браузерах.