当前位置: 代码迷 >> 跨浏览器开发 >> FONT 标签字体颜色对文本装饰('text-decoration')的影响
  详细解决方案

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

热度:1717   发布时间:2013-02-26 00:00:00.0
【分享】FONT 标签字体颜色对文本装饰('text-decoration')的影响
古老的 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 的颜色:
HTML code
<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 特性的影响。
HTML code
<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' 时,问题相同。

该问题的变形
HTML code
<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来控制字体的颜色吧……

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


------解决方案--------------------------------------------------------
hen hao 谢谢楼主
------解决方案--------------------------------------------------------
谢谢楼主分享
------解决方案--------------------------------------------------------
谢谢分享
------解决方案--------------------------------------------------------
这个是个好东西,顶一下
------解决方案--------------------------------------------------------
不错啊 啊
------解决方案--------------------------------------------------------
  相关解决方案