关于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> <!-- 一个x图标 -->
3）@font-face使用说明
@font-face语法：
@font-face {
font-family: <字体名称>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
各参数说明：
- 字体名称: 此值指的就是你自定义的字体名称，如font-family: “FontAwesome”；
- src-source: 此值指的是字体文件存放路径，可以是相对路径也可以是绝路径；
- src-format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：embedded-opentype,truetype,woff,svg等；
- weight和style: weight定义字体是否为粗体，style主要定义字体样式，如斜体。
常见字体格式说明：
- TTF - TrueType
Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。 - EOT – Embedded Open Type (.eot)
EOT是嵌入式字体，是微软开发的技术，仅在老版本IE浏览器中使用。 - WOFF – Web Open Font Format (.woff)
WOFF是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。此字体格式发展于2009年，现在正由W3C标准化，以求成为web字体的统一标准。 - SVG (Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。
2、如何自定义、打开和编辑字体文件
字体设计是个很专业的活，一些简单的字母、数字、图标我们可以使用CorelDraw输出ttf文件，然后通过各种格式转换工具，转换成eot、woff等文件即可，当然我们也可以使用
百度字体编辑器，在线进行字体微调，处理完后，导出即可，如下图：
3、text-shadow等文本效果
1）text-shadow, 文本阴影效果
语法： text-shadow: h-shadow v-shadow blur color;
参数说明：
- h-shadow 必需。水平阴影的位置。允许负值。
- v-shadow 必需。垂直阴影的位置。允许负值。
- blur 可选。模糊的距离。
- color 可选。阴影的颜色。
案例：
设置多个阴影，如：text-shadow:-5px -5px red, 5px 5px 3px blue; 逗号分隔即可。还记得10几年前Visual Basic实现文字阴影效果，需要两个label叠加通过position移位来实现，不得不感叹WEB的强大。
2）text-overflow， 规定当文本溢出包含元素时发生的事情
语法： text-overflow: clip|ellipsis|string;
参数说明： 规定当文本溢出包含元素时发生的事情
- clip 修剪文本
- ellipsis 显示省略符号来代表被修剪的文本
- string 使用给定的字符串来代表被修剪的文本
案例： 使用比较广泛的是ellipsis，文本超出省略号显示
注意事项： 文本不能换行，必须设置宽度，overfow:hidden
3）text-stroke，文字描边
text-stroke属性，css3之前就有，之所以在本文列出，是因为合理使用text-stroke可以改变fa等字体显示效果。以fa字体为例，关闭、移除图标我们通常会使用fa-times，一个’x’图标，但是该x图标有点粗，放在tab页上当作关闭按钮来用不是很理想，如何通过css手段让它变细点？解决方案：可以使用 -webkit-text-stroke 属性替代实现，实现原理：使用背景色值来描边。
语法： text-stroke：[ text-stroke-width ] || [ text-stroke-color ]
- [ text-stroke-width ]：设置或检索对象中的文字的描边厚度
- [ text-stroke-color ]：设置或检索对象中的文字的描边颜色
案例： 一个TAB页的关闭图标，如下图所示：
.close-tab.active{-webkit-text-stroke: 1px #fbfbfb;}
从上图可以看出，默认tab页关闭按钮没采用text-stroke处理，激活的tab页关闭按钮进行了text-stroke字体瘦身处理。
