如何使用CSS覆盖HTML中的<FONT SIZE="2">？

Question

我被分配任务对我们现有的网站进行改版。我对 CSS 有一定了解，因此我正在将成千上万个 <font> 标签转换为 CSS 样式，并删除大约两倍于此数量的不必要标签。

一切进展顺利，直到我遇到一个仅作为包装器的产品页面，由服务器执行（使用 aspx 作为包装页）。其他 HTML 文件被该命令拉取到这个 页面中。

这些页面中都有近 700 个被带有这样或那样的问题。之前用 FrontPage 的编辑人员只会把漂亮的东西拖到屏幕上。

无论如何，我想知道是否有一种方法可以在包装页面中使用 CSS 来覆盖 <font> 标签的行为，以便使其变得合理并符合我的其他页面。我甚至也可以接受一些 JavaScript 代码来移除这些标签，但这是我的次选方案。谢谢！

- Deverill

---

所有的字体标签都可能有大小为2吗？如果是真的，那么font { font-size: 12px !important }也必须在IE6上使用。毕竟，IE是第一个实现CSS标准和!important的浏览器。 - Bekim Bacaj

Answer 1

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

你需要的是属性值后面加上!important。

- Eli Grey

---

非常好，但不适用于IE6 - 仍然（可悲地）值得注意。 - Pekka

谢谢你提供了我所需要的答案。我必须迅速而无情地处理IE6（但愿如此）。 - Deverill

我不明白为什么，但即使在IE8中我也无法让它工作。我是不是忽略了什么？有人成功过吗？ - Pekka

@Pekka 对我来说可以工作，你是否使用了 doctype？ - James Goodwin

@James 不行，即使有 doctype 对我也不起作用。无论如何，现在可能是我结束一天的时候了，可能只是某个地方打错了字。 - Pekka

Answer 2

你可以使用CSS属性选择器来匹配你的字体标签：

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

- James Goodwin

---

不过，它不能与IE6一起使用。如果客户在其网站上使用font标签，则可能会出现问题。 - Pekka

谢谢James。对于这个答案，我也点了一个赞。 - Deverill

Answer 3

对于这种情况，简单的重置即可，例如：

font {
    font-size: 100%;
}

- Paul D. Waite

---

+1非常好的解决方案（如果OP不需要以其他特定大小交换size=2。） - Pekka

@Pekka 但是 size 属性将会覆盖这个。他需要一个 !important。 - Eli Grey

“如果 OP 不需要为 size=2 指定其他特定的大小” — 哦，是的，这假设他只是想完全摆脱表示标签的影响。就我个人而言，我会编辑这些页面，700 并不算太多。这可能有点无聊，但在一个不错的文本编辑器中进行一两天的审慎查找和替换，你就可以把一堆乱七八糟的代码变成一些不错的代码了。 - Paul D. Waite

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

- Dancrumb

Answer 5

如果你可以 - 也就是说，如果你可以忽略IE6 - 那么请使用Eli Grey和James Goodwin提出的CSS方法。

一种更干净但更繁琐的方法是进行智能搜索+替换，将所有更改为或其他内容。这将使您摆脱糟糕的代码，并在所有浏览器中正常工作。

- Pekka

---

既然我们正在做正确的事情，那么“size_2”最好被命名为一些语义化的东西。更不用说结束的/font了。 - Adriano Varoli Piazza

@Adriano，关于类名是正确的。我之所以说“智能”搜索和替换，是因为它必须是一种能够识别和替换标签的工具。Dreamweaver曾经有过这个功能，现在也有其他工具可以实现。 - Pekka