定义未来Web样式 CSS 3最新特性一览

　　网页字体和字体装饰

　　font-face

　　关于font-face在网络上的讨论已经够多了，争论的焦点是这个属性是否会给设计带来视觉上的混乱，有些人认为应该按自己意愿选择任意字体，但另外的人则认为应该使用网页安全字体。

　　无论你持何种观点，有一点你必须得承认，使用font-face的网站看起来就是要美观些。font-face属性的使用是相当简单的，首先上传你想使用的字体到你的网站，并给它取一个好的名字。font-face的基本格式如下：

 @font-face {  
     font-family: Museo Sans;  
     src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”);  
} 

　　font-face必须要的两个描述符是font-family和src，如果你想给h2标题使用特殊字体，那么可以：

 h2 {  
     font-family: Museo Sans, sans-serif;  
 } 

　　对于第二个属性src，我们可以利用它做两件事情：

　　1、如果字体已经安装到用户系统上，CSS将会直接使用本地字体，我们可以利用这种机制跳过下载字体的步骤，这样可以节省带宽。

　　2、如果用户系统上没有安装需要的字体，CSS首先要下载URI链接的字体文件，另外我们也指定了字体格式，但这一步也是可以忽略的。这个属性在IE中工作时，需要使用EOT版本的字体，有些字体厂商提供了EOT版本的字体，但大多数时候我们需要使用微软的WEFT或ttf2eot工具转换TrueType字体。

　　text-shadow

　　text-shadow属性允许你给文本添加一个阴影，这个阴影同时应用给文本和文本装饰，如果文本应用了text-outline属性，阴影将从文本轮廓创建。使用这个属性你可以设置阴影的水平和垂直偏移（相对于文本），阴影颜色和模糊半径，下面是一个完整的text-shadow示例：

 p {  
     text-shadow: #000000 1px 1px 1px;  
 } 

　　颜色和模糊半径（最后的值）是可选的，你也可以给阴影使用RGB颜色值，使其透明，如：

p {  
     text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;  
 } 

　　这里我们定义了颜色的RGB值和一个alpha透明值（a，值为0.5）。对于text-shadow，规范仍然有一些悬而未决的问题，如元素的阴影与相邻元素重叠在一起时，浏览器该如何处理。

　　新的Text-Decoration属性

　　text-underline属性的一个问题是给我们的控制很少，但最新的草案提议的新属性和改进的属性可能会给我们更精细的控制，目前还不能使用它们，因此这里只简要介绍一下。

　　◆text-decoration-line
　　取值和text-decoration: none，underline，overline，line-through一样。

　　◆text-decoration-color
　　指定前一属性的线条颜色。

　　◆text-decoration-style
　　有效的取值范围是solid，double，dotted，dashed和wave。

　　◆text-decoration
　　前面三个属性的简写，如果你指定了none，underline，overline或line-through中的任一个值，这个属性将会向后与CSS1和CSS2兼容，但如果你指定了三个值，如text-decoration: red dashedunderline，在不支持的浏览器中就会忽略它们。

　　◆text-decoration-skip
　　指定文本装饰是否应该忽略某种类型的元素，提议的有效属性值包括：none，images，spaces，ink和all。

　　◆text-underline-position
　　使用这个属性你可以控制下划线是否穿过文本的下行字符，有效的属性值包括：auto，before-edge，alphabetic 和after-edge。