当前位置: 秋叶网络博客 网络技术 ◊ 网页中矢量字体图标的运用

网页中矢量字体图标的运用

作者:秋了秋 发表时间:2014年10月20日

当一个网站的小图片很多的时候,传统的网页插入图片是<img src=" "/>,就是用实实在在的图片,如果这些小图标够多的话,对于服务器请求有一定的负担,除了请求数,加载速度也会有一定的影响,纵使它是“小”图片。往往我们打开一个网站,当网速不给力的时候,看到一些小图标一个一个地加载出来,就知道它对访客的体验也不是太友好。当然你可以通过css sprite技术压缩图片同时减少服务器请求。但无论怎么减小服务器请求,它至少还要有一个请求。况且css sprite压缩的图片很不自由,当修改图片或者增减图片的时候很麻烦,你要保留原先的零碎图片再重新压缩合并。但是网页中矢量字体图标的出现,解决了所有问题。

矢量图片

网页中矢量字体图标的主要特色: ✓  它不是图片,但胜似图片; ✓  一种字体,自定义图标,是网页操作的象形语言; ✓  纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果; ✓  无限缩放,矢量图标在任何尺寸下都一模一样; ✓  减少服务器请求,优化加载速度; ✓  支持 Internet Explorer 7 浏览器; ✓  能够在各种屏幕完美呈现; ✓  丰富的图形图标让你免费选择; ✓  对设计师友好,设计师能够轻松使用; ✓  和其它图标字体不同,兼容屏幕阅读器;

矢量字体图标的优点介绍就到这里,现在来看看怎么制作和使用:

既然是一种字体,自然要有该字体库,很多网站为了使用这种字体,却引入通用矢量字体的字体库,其缺点是体积大,加载困难,反而在加重服务器负担,适得其反。字体库如何按需制作?只要到icomoon官网,点击选择自己需要的字体,选择完之后点击网页下方的font把字体下载下来,下载的文件里面有个文件夹是font,里面四个文件就是我们需要加载的字体库,其它文件都是附加说明的。 如何加载这四个文件?只需在自己的网站的css文件的起始加入以下代码:

@font-face {font-family: 'icomoon';src:url('fonts/icomoon.eot?-bmguq4');src:url('fonts/icomoon.eot?#iefix-bmguq4') format('embedded-opentype'),url('fonts/icomoon.woff?-bmguq4') format('woff'),url('fonts/icomoon.ttf?-bmguq4') format('truetype'),url('fonts/icomoon.svg?-bmguq4#icomoon') format('svg');font-weight: normal;font-style: normal;}

[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

剩下的就是定义特定元素的字体属性,拿例子来说会比较好理解。

比如说网页中引入一个元素<span class="icon-wuover"></span>,需要在css中再加入.icon-wuover:before {content: "\e601";}即可实现字体图标的显示。e601就是对应图标的代码,可自行替换,但需要注意的是class一定要有icon-前缀。另外可以通过修饰特定图标,比如说颜色,大小等等。

注:如果后续要增删图标请用下载包里面的selection.json文件到回icomoon官网进行增删。

教程完毕!

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/147.html
目录: 网络技术 | 标签: 矢量字体图标, icomoon图标 | 16404次阅读