解决网页中使用自己喜欢字体容量过大加载过久的问题！字蛛webfont 安装及使用方法

本文链接：https://blog.csdn.net/gongda007/article/details/79313681

字蛛的好处就不说了，的确对于中文字体是一种创新，因为网页的字体直接影响美观度，但是用@font-face预先加载字体，因为受用户带宽影响，

所以要加载一阵子，大大降低了体验，可能这个时候很多人就放弃使用自定义字体了，直接用用电脑自带字体，但是说实话真的不好看，特别是对于我这种对细节要求高的人来说。所以便找一种快速加载的方法，只能从减少字符集来入手，把常用的字符存起来供用户加载，这样就比原来几十M的加载快不少。研究这个可惜没有老师，只能自己边搜前辈的，变测试。偶然发现了font-spider这个工具。

总之挺周折的吧，首先对node.js就不是很熟悉

先要安装node.js

下载到服务器（https://nodejs.org/en/download/）然后安装

但是发现总是提示无法npm

因为不懂就花了好多时间，发现其实是因为国内npm国外资源被屏蔽了

所以就搜了解决方案（http://blog.csdn.net/daiqinge/article/details/78343159）

于是乎就真的解决了。

就开始了下面的步骤

先安装nodejs和git，比如放在D:/nodejs/ 文件夹

cmd 进入该文件夹，安装npm install express

安装 npm install font-spider -g

安装 npm install grunt-font-spider --save-dev

安装 npm install gulp-font-spider --save-dev

至此，安装完成。比如我们要压缩 F：/test/www/ 目录下的字体，先把ttf字体放在 www/font/ 文件夹里，

然后用cmd进入www文件夹，执行：font-spider index.html 或者font-spider *.html 即可。

但是在执行：font-spider index.html 之后出现了web font not found.

FUCK！

干脆把所有的字体名称都改成了pinghei！

还是不行，

最后发现index.html里的style.css是绝对路径不是相对路径，就索性加上在前面加上了 ./

大概就是这个样子：

“<link id="Portals" rel="stylesheet" type="text/css" href="./skin/css/style.css" />”

然后在css文件里参照此引用：

 
    
          
        
/*声明 WebFont*/
@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';
} 
          
        
 
  