图标自定义字体

@font-face

此属性的作用可以引入网络字体，如果不使用此属性，那么只能够使用本机已经安装的字体。

@font-face是css3新增的一个模块，其实在上世纪90年代，从IE4浏览器就开始支持，不过仅限于IE浏览器。

但是由于一些支持和效果上的原因，在css2.1中就删除了此属性；后来CSS3增加了此属性。

@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

参数解析:

（1）.YourWebFontName:必需，自定义字体的名称。

（2）.source:必需，规定自定义字体的路径，可以是相对路径也可以是绝对路径。

（3）.format:可选，规定自定义字体的格式，用来帮助浏览器识别，主要类型:truetype,opentype,truetype-aat,embedded-opentype,avg等。

常见自定义字体格式:

format属性

1.Embedded Open Type(.eot)格式:

.eot字体是IE专用字体，可以从TrueType创建此格式字体。

浏览器支持:

IE4和IE4以上浏览器。

2.TureType(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此不为网站所优化。

浏览器支持:

（1）.Firefox3.5+。

（2）.Chrome4.0+。

（3）.Safari3.1+。

（4）.Opera10.0+。

（5）.iOS Mobile Safari4.2+。

3.Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。

浏览器支持:

（1）.IE9+。

（2）.Firefox3.5+。

（3）.Chrome6+。

（4）.Safari3.6+。

（5）.Opera11.1+。

4.OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能。

浏览器支持:

（1）.Firefox3.5+。

（2）.Chrome4.0+。

（3）.Safari3.1+。

（4）.Opera10.0+。

（5）.iOS Mobile Safari4.2+。

5.SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式。

浏览器支持:

（1）.Chrome4+。

（2）.Safari3.1+。

（3）.Opera10.0+。

（4）.iOS Mobile Safari3.2+。

（4）.font-weight:可选，规定字体是否为粗体。

（5）.font-style:可选，规定字体的样式，比如斜体。

DEMO

@font-face {
  font-family: \'MyWebFont\';
  src: url(\'webfont.eot\'); /* IE9 Compat Modes */
  src: url(\'webfont.eot?#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
       url(\'webfont.woff\') format(\'woff\'), /* Modern Browsers */
       url(\'webfont.ttf\')  format(\'truetype\'), /* Safari, Android, iOS */
       url(\'webfont.svg#svgFontName\') format(\'svg\'); /* Legacy iOS */
}

上面将引入的字体自定义名称为"MyWebFont"；并且能够兼容低版本IE浏览器。

兼容性处理介绍如下:

（1）.在标准浏览器中，src属性支持后面跟着多个url，不同的浏览器会选择适合自己的字体；但是IE9之前的浏览器并不支持，当 src属性包含多个url时，它无法正确的解析而返回404错误，于是把仅IE9之前支持的EOT格式放在第一位，然后在url后加上 ?，这样 IE9之前的版本会把问号之后的内容当作 url 的参数；#iefix的作用，一是起到了注释功能，二是可以将url参数变为锚点，减少发送给服务器的字符。

（2）.在上面的代码中，我们看到了两个src属性，通常只写下面的一个即可，第一个是为了支持IE9下的兼容模式（也就是IE9浏览器下使用IE7或者IE8默认渲染页面）;由于在兼容模式下，浏览器对自定义字体的解析模式发生了变化，使用第一条中问号的方式已经失效，解决方案就是添加一个src: url(\'webfont.eot\')。

content是下载的字体图标对应的uncode编码，安装ttf字体后可查看，下载附录 demo.html也可查看