iconfont+开始支持彩色图标

之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950

iconfont官网：http://www.iconfont.cn/plus

前段时间去iconfont官网逛逛，发现iconfont已经升级iconfont+了，对比起之前的iconfont，iconfont+最大的特点是什么呢？iconfont+开始支持彩色图标了，对于此项新的改进，官网是如此介绍的：

symbol引用:

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

这种全新的使用方式，据官网介绍说是做了一个svg的集合，SVG（Scalable Vector Graphics）可缩放矢量图形，SVG具有什么特点呢?

SVG特点：

1．任意放缩。（用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。）
2．文本独立。（SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。）
3．较小文件。（总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。）
4．超强显示效果。（SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。）
5．超级颜色控制。（SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。）

由于svg的格式优点是基于xml可扩展标记语言，是一个XML文件，而且SVG是被设计用于互联网，所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML，同样也可以在浏览器中动态地创建、修改和删除图片。

因此在网页中使用svg与其他图像格式相比（比如 JPEG 和 GIF）的优势在于:

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

而浏览器的支持情况，iconfont官网也有说明：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。

iconfont官网描述浏览器渲染svg的性能一般，还不如png，实测了一下做了几个彩色小icon，现代浏览器对svg渲染其实也相当不错了。而且iconfont平台也是推荐这种全新的使用方式，现在互联网技术迅猛发展，相信不久的将来这种使用方式会是未来的主流。

介绍了那么多，那么来做个小案例体验一下。

首先还是到iconfont官网，这次找几个彩色的图标：

1478744887612514.png

网页导航栏多色图标库，点进去会发现很多多色图标库的集合：

1478745068101688.png

找到对应的图标保存到项目后，去图标管理—我的项目里面，找到新添加的项目并下载到本地，下载下来解压后我们可以看到这些文件：

1478745117687690.png

iconfont+除了全新的使用方式，传统的使用方式也进行了一些优化，详细可以参考demo文件：

首先第一个demo文件打开是font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：
（注意:为了浏览器更好的渲染，如果只使用单色图标，建议不要选择下载多色图标替代）

---

1478745329981511.png

---

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css">
(这种方式是需要引入iconfont.css文件，同时还需要注意字体文件的摆放路径)

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>
实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
iconfont.css源码其实也是通过@font-face规则声明字体，并引用字体文件，而字体编码则是通过伪元素的方法添加进html标签里面的，所以对于浏览器支持情况需要ie8+（下图为添加字体编码css样式）

1478745369133807.png

这种使用方式需要注意的地方也都提过了，有兴趣的可以去亲自体验一下。

最原始的的unicode使用方式的使用方法可参考上一个教程，教程链接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950

现在来看一下全新的使用方式，symbol引用，其实这种方式使用起来也非常简单。打开demo_symbol.html文件可以看到详细的使用方法：

iconfont图标分别对应不同的类名：

1478745448110204.png

symbol引用：

使用步骤如下：

第一步：引入项目下面生成的symbol代码：
<script src="./iconfont.js"></script>
(首先需要引入iconfont.js文件，此js文件相当于是svg图形集合文件的调用)

第二步：加入通用css代码（引入一次就行）
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

使用多色图标引用效果：

1478745489786147.png

可以看到浏览器渲染还是挺不错的，有兴趣的可以自行体验一下，最后案例文件附上，使用的时候注意文件的摆放路径。
来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2763