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

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

2. iconfont字体图标和各种css小图标的详解

通常我们是把这些图形切图之后做成精灵图（又叫雪碧图）；

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

精灵图的优点：减少服务器的请求次数，降低服务器压力；

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视频教程》

以上是iconfont是什么？css中iconfont实例用法总结的详细内容。更多信息请关注PHP中文网其他相关文章！