Web前端开发 fontSpider(让自定义字体成为可能)

什么是后端与前端一起开发
ios前端开发干什么的
前端开发的js指什么软件

场景:移动开发中需要用到特殊字体,但是一个字体文件大小有8M。
fontSpider:通过使用gulp(或者grunt,这里我使用gulp)插件,把你的页面中没有用到的字从字体文件中去掉。从而实现压缩的效果。其实这个也不叫压缩,只是别没有用到的东西去掉而已,只是这是一个字体文件
(看到这里或许有人会想:为什么不用一张图片搞定呢,因为内容有可能是随机的。就是在会出现有很多种情况下,使用图片的话就需要多少种情况就得切多少张图片的)

举个栗子:

!(attimg://article/content/picture/201603/03/174307uyqy4ejhqsg8d8gh.png)

这里是一个结果页面,这是 什么卦、卦辞、推断不确定,有64种情况,使用特殊字体,字体源文件8+MB。
步骤:
1、安装 nodejs
2、到gitbub上下载使用gulp-font-spider的源码:地址
3、在项目路径(下图是要进到suangua或者test文件夹,这两个文件夹里都各自有个配置文件gulpfile.js,不用修改,看一下路径都没错就ok了)下依次执行 npm install gulp , npm install font-spider, npm install through2。如图效果:

!(attimg://article/content/picture/201603/03/175322ut5aaa7la7amfi5l.png)

4、插件下载安装完之后,这里有一个就是,怎样才能设置哪些字体是需要的,因为这个fontSpider工具不具备识别js添加的内容。
我的数据文字都在一个数组里的,js遍历一下,把所有有可能需要显示的文字都打印出来,在网页上查看,然后选择复制,再粘贴到index.html文件中。这样子,需要显示的文字都写死在页面中,写死这个很重要
,让fontSpider能识别需要用到的文字。
5、命令行执行gulp就能生成需要的字体文件(所有的命令行执行都要在项目目录下的),如图:

!(attimg://article/content/picture/201603/03/175603tn96uq46ot7vnpo4.png)

6、最后把这些生成的字体文件拷到开发环境目录下使用就好了,最后最关心的就是出来的文件大小是多少了,我这里用到的文字大概有3000个,然后字体文件是223k。

前端开发基础需要学什么
前端组件化开发是什么
web前端开发需要学习什么知识
» 本文来自:前端开发者 » 《Web前端开发 fontSpider(让自定义字体成为可能)》
» 本文链接地址:https://www.rokub.com/7387.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!