自定义字体与字蛛使用方法及坑点

相信很多做前端的都会遇到这一类问题，当前网页需要引入一些特殊字体，过去这些字体通常使用图片代替，不仅增加了request请求，交互起来也不方便。

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

• 爬取所需的字

运行 font-spider 命令：font-spider ./路径/文件名.html
页面所需的字体将会自动压缩好，原 .ttf 字体会备份，就是那个很大的文件夹。爬取压缩结束后原来8M左右的中文字体包现在只要6KB，还能将你页面所用到的字显示出来。

爬取压缩

备份的字体文件

字蛛坑点：

这里建议对需要替换大段文字的文本少使用字蛛，因为使用后这样你会发现在有标点和空格的地方会出现“!”。
解决方案：
1.可以利用标签嵌套标点的方法进行微调。
2.有网友说 写成 font-family:Arial +自己的字体，感叹号就会消失 （本人未亲自测试）。

其他webFont在线制作网站

阿里webFont不仅能在线获取webFont还有海量图标网站制作的时候用起来很方便。
fontmin懒得写代码，fontmin客户端帮你解决问题，点击生成 duang~的一下生成新的字体包