使用 CSS 覆盖 DIV 中的字体大小答案

【问题标题】：Override font size in a DIV using CSS使用 CSS 覆盖 DIV 中的字体大小
【发布时间】：2012-06-18 21:23:28
【问题描述】：

在 DIV 中，我放置了一些从数据库加载的文本/html 代码。此文本有时包含字体大小定义（例如：font size="3"）。有没有办法使用 CSS 在这个特定的 DIV 中覆盖这个字体大小。

感谢您的帮助。

【问题讨论】：

【解决方案1】：

假设标记类似于以下内容：

<div>
    <font size="1">Some text at 'size="1"'</font> and natively-sized text, with more at <font size="26">'size="26".'</font>
</div>

然后你可以从父元素显式指示 CSS 到 inherit 和 font-size：

div {
    font-size: 1.5em;
}
div font {
    font-size: inherit;
}

当然请注意，font 已被弃用，因此不应使用（因为对元素的支持可能会在没有通知的情况下停止，和/或实现会在没有警告的情况下更改）。

顺便说一句，虽然!important 将强制声明覆盖通常的级联样式，但它需要大锤才能破解；并且，如果可以避免（在这种情况下，似乎可以避免）它应该是，因为它使以后的样式调试和相关的继承问题变得复杂。

此外，这是对症下药；您真正面临的问题是您的内容/数据库中存在font 标签。这应该通过删除元素并用适当样式的元素替换它们来纠正，例如em、span 等等...

参考资料：

【讨论】：

【解决方案2】：

使用CSS !important 表示法，您告诉浏览器覆盖div 中定义的任何字体大小：

从上面的链接中可以看到：

但是，为了平衡，“!important”声明（声明后的定界符“!”和关键字“important”）优先于普通声明。

示例

查看此working Fiddle 示例！

.htmlContents * {font-size:10px!important;}

<div class="htmlContents">my database html content</div>

【讨论】：

【解决方案3】：

一个想法：给这些文本标签一个 id 或 class，然后使用 JavaScript 找到这些元素并更改它们的样式。

【讨论】：

【解决方案4】：

在插入 div 之前从文本中去除“字体”标签怎么样？然后只需使用字体大小设置 div 的样式。

【讨论】：