CSS3 @font-face(自定义字体)

相信很多人已经了解这个新特性了，在CSS3之前web设计师必须使用用户计算机上已经安装好的字体，如果需要特殊字体，必须以图片的形式放置在网页上。而现在我们可以通过CSS3的@font-face规则来定义我们想要的字体。
@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。对于@font-face可参照 w3school的@font-face。
就像任何一项技术的产生都会带来相应的利与弊一样，要使用“自己的”字体的话，需要使用@font-face属性。这就产生了个让人头疼的问题，中文不像英文，只有26个字母和一些简单的符号。中文有上万个字，每一个字都需要载入的话，一打开网页为了加载几个字就会话无缘无故花掉很多（很多）流量。

字蛛的使用方法

就像某参老师跟我们说的一样，要想精通一件事情，就要先理解它的机制和原理。
字蛛的工作原理：通过对本地 CSS 与 HTML 文件的爬取，将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩，再生成跨浏览器使用的格式。
下面放上字蛛的链接字蛛官网

字蛛
粗略看了下字蛛官网的的使用说明，感觉说的很详细了。不过对于一些小白来说可能还有很多看不懂的地方。这里详细的介绍下：

安装NodeJS

像官网说的那样安装好NodeJS；附NodeJS下载链接

安装字蛛

打开Node.js command prompt如下图所示，并输入命令：npm install font-spider -g 回车执行

NodeJS管理工具

在 CSS 中声明WebFont

切换到你写的css页面声明字体，方法与CSS3的@font-face方法类似

          @font-face {
          font-family: 'pinghei';
          src: url('../font/pinghei.eot');
          src:
          url('../font/pinghei.eot?#font-spider')
          format('embedded-opentype'),
          url('../font/pinghei.woff') format('woff'),
          url('../font/pinghei.ttf') format('truetype'),
          url('../font/pinghei.svg') format('svg');
          font-weight: normal;
          font-style: normal;
          }
        /*使用选择器指定字体*/
        .home h1, .demo > .test {
        font-family: 'pinghei';
        }

注意：
1.<small>@font-face中的src定义的 .ttf 文件必须存在，其余的格式将由工具自动生成</small>
2.<small> 开发阶段请使用相对路径的 CSS 与 WebFont</small>