字蛛fontSpider的使用

字蛛官方文档 http://font-spider.org/index.html

首先安装全局包 npm install font-spider -g

然后下载字体 ,本次需要的是 "造字工房力黑（非商用）常规体.ttf" ,放到指定的文件夹里,然后在下面调用

/*声明 WebFont*/
@font-face {
  font-family: 'zzgflh';
  src: url('../font/zzgflh.eot');
  src:
    url('../font/zzgflh.eot?#font-spider') format('embedded-opentype'),
    url('../font/zzgflh.woff') format('woff'),
    url('../font/zzgflh.ttf') format('truetype'),
    url('../font/zzgflh.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

在git 里面输入命令 font-spider index.html,会在font文件夹生成下面几个文件

字蛛fontSpider的使用

补充1：

后来的项目中，页面中的数字需要用到特殊字体，而这些数据又是请求接口后才显示的，这种情况下就使用不到字蛛这种预先处理了。而整个字体文件都加载的话又不友好，那么这种情况下可以怎么处理呢？

我们可以独立创建一个文件夹，在里面按照上面的步骤重新使用字蛛，只不过index.html使用到该字体的内容要输出 “0123456789”，然后执行字蛛后生成的新文件就是我们要的字体文件啦，而且满足了兼容各浏览器的不同格式要求。

因为我们上网找的字体文件一般都是.otf 和.ttf，而使用字蛛只需要ttf文件，就可以生成我们要的数字特殊字体了。

未解决问题：

如果页面中输出的字体内容不确定（有中文，英文，数字，字符等），但是又找不到对应对的四个文件格式，这种情况怎么做兼容呢？

字蛛fontSpider的使用

相关推荐