今天闲来无事,在网上闲逛的时候发现一个很不错的东西,特来此分享,感觉用处还是很大的,特别是对于咱们这些服务器资源紧张的草根来说!
对于站长来说,网站中使用图标是必不可少的,图标技能美化网站又能让用户快速的找到各种分类,但是图标太多又着实影响网站速度,那要肿么办呢?鱼与熊掌不能兼得啊!
今天多姿就介绍一下这个鱼与熊掌同时兼得的好方法,废话不多说,下面咱们进入正题。
使用图标字体的优势
- 适应性:图标字体不是图像文件,那么它的大小会小很多,特别是如果你已经开始使用自动适应的双尺寸的图像(即同时支持电脑端和手机端的网站),那么就有不同的需求,图标小了,在大分辨率下图片分辨率就会降低,反之亦然。而使用图标字体,无需下载图像,你的图标将瞬间呈现,这样网站速度就提升了。
- 可扩展性:图标字体可以结合CSS设置为任意大小。同时兼任不同的设备终端。
- 灵活性:文字效果可以很容易地应用到你的图标,包括颜色,阴影和翻转状态都可以随意改变,永不着每次都要根据网站风格,重复去做图标。
- 兼容性:现在市面上所有的浏览器均支持Web字体,即使IE6和更早版本都能很好的兼容。
下面说说怎么样来制作Web字体
制作Web字体我们需要用的是一款名叫IcoMoon的在线应用,使用方法简单,而且界面不复杂,不懂英文你照样完成所有程序。它目前免费提供的图标打倒了3800枚,当然你也可以自己利用Adobe Illustrator设计自己需要的图标,到这里转换成Web字体。
第一步、打开IcoMoon在线应用程序,你会看到如下的界面
好吧,刚开始看到这个界面是不是感觉无从下手?没关系咱一步步来。
第二步、选择你需要的图标,然后转化成字体,这个不太好说明,还是看图熟悉一下界面吧
第三步、界面熟悉了就好办了,如果你直接在这里选择图标生成,而不是自定义的话;那么首先选择你喜欢的图标(这时上面一定要选择哪个选择工具哦,就是箭头),然后直接点击下面的“Font”按钮,然后再点下方的“Download”按钮,你选择多少他就就自动打包,等打包完成后他就自动开始下载了,完工。
下载后的压缩文件里面,包含了预览,里面含有html、css、ttf、woff、svg这些个文件,你可以直接打开index.html文件预览。
预览文件你可以看到如下内容:
我擦,这是不是太简单了点?很明确的告诉你,他就是这么简单!
关于自定义生成Web字体的方法将在下一个教程里面说到,好了,教程就到这里,一个字一个字的码累啊,各位要是觉得好方法好,请别忘记顶一下多姿!
=============================================
如何把自己做的图标转换成web字体教程已出 请点这里
Demo:Web字体在线演示
对了icomoon的地址是http://icomoon.io/app 到这里生成!
首页是http://icomoon.io 可以获取更多其他的信息!
欢迎转载本文章,但是请带上文章的出处:http://dz9.net 谢谢!