CSS3中与文字相关的样式

1.给文字添加阴影：text-shadow属性(特别指出IE浏览器要IE10+的版本才支持)
    语法如下：

text-shadow:length length length color;

其中，第一个参数length表示阴影离开文字的横向距离，为必需参数，该值为正时， 阴影在文字的右方，该值为负时，阴影在文字的左方；第二个参数length表示阴影离开文字 的纵向距离，为必需参数，该值为正时，阴影在文字的下方，该值为负时，阴影在文字上方 ；第三个length表示阴影的模糊半径，模糊半径为可选参数，默认值为0，数值越大，阴影越模糊；color表示阴影的颜色。

<div id="test1">
      这是一个测试
</div>
 
<style type="text/css">
     #test1{
          font-size: 40px;
          text-shadow:10px 10px 15px red;
      }
</style>

上例中给文字指定了向左10px，向下10px，模糊半径为15px的红色阴影，chrome浏览器中的效果如下:

也可以给文字指定多个阴影，并且每个阴影颜色可以不同，在指定时对多个阴影用逗号隔开，

<div id="test2">
      这是一个测试
</div>
 
<style type="text/css">
      #test2{
          font-size: 40px;
          text-shadow:10px 10px 15px red,
                      25px 25px 15px green;
      }
</style>

chrome浏览器中的效果如下:

2.使用服务器端字体：Web Font与@font-face属性

可以使用@font-face属性来利用服务器端字体，用法：

@font-face{
      font-family:WebFont;
      src:url(font/Fontin_Sans_R_45b.otf")  format("opentype");
 }

font-family的值WebFont用来声明使用服务器端字体，src路径指明服务器端字体文件所在的路径，format声明字体文件的格式，可以省略。在IE中只能使用微软自带的Embedded OpenType字体文件，文件扩展名为“.eot”。

3.让文本自动换行：word-break属性

用法：

<style type="text/css">
   div{
       word-break:keep-all;
   }
</style>

word-break有三个取值：
                          normal：表示使用浏览器默认的换行规则；
                          keep-all：只能在半角空格或连字符处换行；
                          break-all：允许在单词内换行。

4.让长单词和URL地址自动换行：word-wrap属性
用法：

div{
  word-wrap:break-word;
}