跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

iconfont是什么?css中iconfont实例用法总结

icon font是什么?

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这些内容到底什什么东西呢?使用字体编辑软件打开下载下来的字体文件后你就明白了。

2.

iconfont字体图标和各种css小图标的详解通常我们是把这些图形切图之后做成精灵图(又叫雪碧图);

精灵图的原理:把很多小图片集合成一张大图片,然后用设置背景图的位置来显示图片;

精灵图的优点:减少服务器的请求次数,降低服务器压力;

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更下载sprites是一款很好的精灵图制作工具;

当然还有其他的方法可以制作这些小的图形,比如上图中,天猫使用的字体图标iconfont;

字体图标,顾名思义,就是一种字体,和字体一样,是矢量的,我们也叫矢量图标,任意放大缩小,都不会失真;

3.

CSS中iconfont的使用详解就算我们一开始不懂这个英文不懂是干嘛的,对于iconfont,英文从后往前读应该叫做:字体图标。这里面已经包含两个概念,首先必须是字体,第二,就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性,所以这个iconfont必须是以文字嵌入到样式中,所以想到的必须是font;既然是图标那么它就必须有一个路径来引入进来,首先我们一开始想到的img这个标签,既然又是文字又是图标,我们能想到的就只有这个@font-facecss3属性。

4.

iconfont-矢量图标字体的运用使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:

1.)自由的变化大小

2.)自由的修改颜色

3.)添加阴影效果

4.)IE6也可以支持

5.)支持图片图标的其它属性,例如,透明度和旋转等等

6.)可以添加text-stroke和background-clip:text等属性,只要浏览器支持

5.

图标字体(IconFont)制作图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题。 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾。直到CSS3,又一次引入,这真是个好消息。

相关问答

1.

使用阿里 iconfont 在安卓微信内 不显示 在ios下显示

2.

扩展本地项目中阿里的iconfont字体库,添加图标字体

3.

iconfont图标制作问题【相关推荐】

1. php中文网免费教程:

《CSS 在线手册》

2. php中文网免费视频教程:

《php.cn独孤九贱(2)-css视频教程》

相关文章