【分享】FONT 标签字体颜色对文本装饰('text-decoration')的影响

WebAdvocate 2010-08-25 06:48:25

加精

古老的 FONT
<font> 可规定文本的字体、字体尺寸、字体颜色。设计之初，为了修饰文字而生。但是，现今CSS2.1中对 font 的支持，直接宣告了 FONT 退隐的消息：在 HTML 4.01 中，font 元素不被赞成使用。在 XHTML 1.0 Strict DTD 中，font 元素不被支持。
FONT 标签在各浏览器中都被支持，只是不再推荐。

HTML4.01标准中的 FONT
根据 W3C HTML 4.01 规范，FONT 元素属于字体修饰元素（Font modifier elements），用来改变其内容的字体家族、字体大小及字体颜色，包含三个定义的属性：
● size 属性：设置字体大小，可以是绝对值（取值范围：整数 1~7，代表 7 个等级），也可以是相对值（如 +3、-1）；
● color 属性：设置字体颜色，color 类型；
● face 属性：设置字体家族，是一组由逗号分割的字体名称列表。

其中，FONT 元素连同其上述三个属性均被废弃。
关于 FONT 元素的更多信息，请参考 HTML 4.01 规范 15.2.2 Font modifier elements: FONT and BASEFONT 中的内容。

FONT 标签 color 属性对文本装饰('text-decoration')的影响
text-decoration 是文本修饰的 CSS 特性，可以给一段文本加上不同的修饰线。比如 text-decoration:underline 会给文字加一个下划线。
看这个例子，FONT的 color 属性影响 text-decoration 的颜色：

<style>

    body {

       font-size: 30px;

       font-family: Verdana;

    }



    span {

       color: blue;

       text-decoration: underline;

    }

</style>

<span>TEXT <font color="red">TEXT in FONT</font> TEXT</span>

如上，SPAN 标签有下划线，并且文本颜色是蓝色，所以，下划线也应该是蓝色。FONT 在 SPAN 内，颜色属性设置成了红色。那么，最终，FONT 里面文字的下划线是什么颜色的呢？
看图（忽略 font-size 对下划线粗细的影响差异）：
IE6/IE7/IE8(Q)/Firefox(Q)/Opera(Q)/Chrome(Q)/Safari(Q)中：

IE8(S)/Firefox(S)/Opera(S)/Chrome(S)/Safari(S)中：

将 text-decoration:underline 换作是 'overline' 后,截图：
IE6/IE7/IE8(Q)/Firefox(Q)/Opera(Q)/Chrome(Q)/Safari(Q)中：

IE8(S)/Firefox(S)/Opera(S)/Chrome(S)/Safari(S)中：

继续尝试 text-decoration 的其他两个值：line-through 和 blink。你会发现，除 blink (闪烁效果)之外，其他3个值的文字装饰效果线的颜色，在IE6/IE7/IE8(Q)/Firefox(Q)/Opera(Q)/Chrome(Q) /Safari(Q)中，都会受到FONT color 属性的影响。

FONT 元素 color 特性对文本装饰('text-decoration')的影响
以上说的是 color 属性对文本装饰颜色的影响，继续看看 color 特性的影响。

<style>

    body {

       font-size: 30px;

       font-family: Verdana;

    }



    span {

       color: blue;

       text-decoration: underline;

    }

</style>

<span>TEXT <font style="color:red;">TEXT in FONT</font> TEXT</span>

Chrome(Q)/Safari(Q)中：

IE6/IE7/IE8/Firefox/Opera/Chrome(S)/Safari(S)中：

经测试，当 text-decoration 是 'line-through' 和 'overline' 时，问题相同。

该问题的变形

<style>

    body {

       font-size: 30px;

       font-family: Verdana;

    }

    a {

       color: blue;

    }

</style>

<a href="#">TEXT <font color="red">TEXT in FONT</font> TEXT</a>

以上的下划线由 A 标签默认样式生成，也存在这个问题。有兴趣的同学可以逐个试试。

总结
FONT 的HTML color 属性会影响 IE6/IE7/IE8(Q)/Firefox(Q)/Opera(Q)/Chrome(Q)/Safari(Q) 中文本修饰的颜色，FONT 的CSS color 特性仅在 Chrome(Q)/Safari(Q) 中影响修饰线的颜色。

还是用CSS来控制字体的颜色吧……

更多兼容性问题：
【分享】浏览器兼容性问题目录

...全文