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

Atas ialah kandungan terperinci iconfont是什么？css中iconfont实例用法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!