font-spider(字蛛)---前端压缩字体

font-spider(字蛛)?是什么鬼?不知道你们第一次看到是不是跟我一样的疑惑,虽说我做前端有好几年了,看到这个也是一脸懵逼,不知道这是什么,接下来小编讲解一下,立马大彻大悟,原来不过如此嘛!

font-spider简介

Font-Spider 一个神奇的网页中文字体工具,由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf、 方正喵呜.ttf

一开始想着这些设计人员来切图,在页面以引入图片的形式展示,但是这个页面很特殊,大概需要接近300个,想象一下一个页面300张图,将是何等的壮观,估计加载的什么时候才能完全展示出这个页面,何况设计跟美工人员可能会崩溃吧。哈哈哈

所以就换着思路,就到了特殊字体库,尝试着......

发现其实so easy

第一步我们必须安装node
安装node
这是node下载链接

推荐点击这个

node安装蛮简单的,一路next就好
下载安装好后。安装之后在命令行中使用'node -v检查安装是否成功。
npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输入npm -v来测试是否成功安装。

 npm 安装 font spider

 npm install font-spider -g

查看是否安装完成

 font-spider --version

image.png

 在普通项目使用 特殊字体
font-spider(字蛛)---前端压缩字体_第1张图片

压缩打包

font-spider index.html

我们看到生成,
font-spider(字蛛)---前端压缩字体_第2张图片

在vue项目中如何使用呢

我们可以在demo中打包压缩后,使用压缩后的特殊字体库。
font-spider(字蛛)---前端压缩字体_第3张图片

小编不易,如有收获,微信赏小编喝杯娃哈哈

单身狗的 葵花宝典,撩妹必备 敬请关注!

你可能感兴趣的:(font-spider,前端,压缩,字体)