iconfont是什么?
iconfont到了今天应该是一种比较成熟的技术了。IconFont拆开来看,就是 Icon 和 Font,这样估计大家应该都能理解是什么,那两者结合呢?没错,就是 IconFont ~。利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示 icons。因为字体是矢量化图形,它天生具有「分辨率无关」的特性,在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图, 如:png,jpeg,放大后有锯齿或模糊现象。下面的文章就是来聊一聊iconfont实例用法。
iconfont实例用法
1. 什么是Iconfont?介绍Iconfont的好处及使用
Iconfont的好处是什么呢?
自由变化大小
自由修改颜色
可以添加一些视觉效果如:阴影、旋转、透明度。
兼容IE6
上面的几点是不是完败原始的icon,缺点也有就是色彩过于单调,是纯色的。
下图是font-awesome的css文件里面的部分内容,从名字来看像是icon的定义,但是\f002 \f003这些内容到底什什么东西呢?使用字体编辑软件打开下载下来的字体文件后你就明白了。
通常我们是把这些图形切图之后做成精灵图(又叫雪碧图);
精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片;
精灵图的优点:减少服务器的请求次数,降低服务器压力;
sprites是一款很好的精灵图制作工具;
当然还有其他的方法可以制作这些小的图形,比如上图中,天猫使用的字体图标iconfont;
字体图标,顾名思义,就是一种字体,和字体一样,是矢量的,我们也叫矢量图标,任意放大缩小,都不会失真;
就算我们一开始不懂这个英文不懂是干嘛的,对于iconfont,英文从后往前读应该叫做:字体图标。这里面已经包含两个概念,首先必须是字体,第二,就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性,所以这个iconfont必须是以文字嵌入到样式中,所以想到的必须是font;既然是图标那么它就必须有一个路径来引入进来,首先我们一开始想到的img这个标签,既然又是文字又是图标,我们能想到的就只有这个@font-facecss3属性。
使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:
1.)自由的变化大小
2.)自由的修改颜色
3.)添加阴影效果
4.)IE6也可以支持
5.)支持图片图标的其它属性,例如,透明度和旋转等等
6.)可以添加text-stroke和background-clip:text等属性,只要浏览器支持
图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题。 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾。直到CSS3,又一次引入,这真是个好消息。
相关问答
1. 使用阿里 iconfont 在安卓微信内 不显示 在ios下显示
2. 扩展本地项目中阿里的iconfont字体库,添加图标字体
【相关推荐】
1. php中文网免费教程:《CSS 在线手册》
2. php中文网免费视频教程:《php.cn独孤九贱(2)-css视频教程》
以上就是iconfont是什么?css中iconfont实例用法总结的详细内容,更多请关注php中文网其它相关文章!
已抢186431个
抢已抢67239个
抢已抢352890个
抢已抢666977个
抢已抢121961个
抢已抢23000个
抢