字蛛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文件夹生成下面几个文件

补充1:

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

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

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

 

未解决问题:

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

 

转载于:https://www.cnblogs.com/stella1024/p/7685636.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值