CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果

  关于CSS3新特性，在上篇博文中"CSS3新特性详解(一)：CSS3选择器、边框、背景使用细节及案例演示"，讨论了CSS3选择器、边框和背景，本文讨论字体@font-face使用详解，如何创建、修改woff字体文件，以及text-shadow等css3文本效果。

  在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 CSS3 @font-face 为前端开发人员打开了一扇窗，不仅可以使用他们喜欢的任意字体，如Font Awesome fa字体，Glyphicons字体图标等，甚至可以完全自定义字体图标。

1、@font-face使用详解

以Font Awesome fa字体为例，我们看下如何使用fa字体。

1）@font-face定义：font-family，src等

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-remove::before, .fa-close::before, .fa-times::before {
    content: "\f00d";
}

说明： fa字体文件定义了多个src以逗号分隔，浏览器根据先后顺序匹配，先匹配到那个就用那个。

2）fa图标使用

<i title="关闭标签页" class="fa fa-times">i> 

3）@font-face使用说明

@font-face语法：

@font-face {
      font-family: <字体名称>;
      src:  [][, []]*;
      [font-weight: ];
      [font-style: