iconfont简单介绍
iconfont是一款为设计师开发的Photoshop图标字体插件,如今通常所指的Icon Font。是用字体文件代替图片文件,来展示图标、特殊字体等元素的方法。
功能使用及优缺点介绍
这是一淘网用到Icon Font的地方
这是新浪微博微吧用到Icon Font的地方
这里还有我们自己做的小浪人
以下我们看看Icon Font都有什么优缺点。从而决定我们是否要使用它:
首先它的体积要比图片小的多
这是做出来的一组Icon Font字体文件,试想一下假设这是图片的话要有多大。50K?100K?甚至很多其它?然而如今这个文件的大小只唯独13K不仅体积小,并且还具有更好的可维护性(由于是矢量,所以拉伸不变形。颜色能够自行更换,支持一些CSS3对文字的效果)
像这些图片全然能够用Icon Font制作
而且还能够通过base64置于CSS内。从而不产生图片的http请求
当然,Icon Font也是有缺点的,因为是字体,所以仅仅支持图片上是纯色的。多种颜色的就不支持了
这当中的表情有多种颜色。因此就没法使用Icon Font了可是在Win8下大量的纯色图标的出现,是否是Icon Font能够普及的一个机会呢?
尽管制作Icon Font自然而然要添加重构的成本,可是跟后期维护相比还是值得的
iconfont插件下载安装及使用
下载安装:
1、点击链接下载安装文件并解压;
2、关闭Photoshop。首先尝试执行iconfont.zxp(假设安装了adobe套装软件则会成功)。假设执行失败。将iconfont文件夹copy到 Photoshop安装文件夹\Plug-ins\Panels\;
3、启动Photoshop,点击 窗体 > 扩展功能 > iconfont,就可以打开插件面板。
4、导入字体图标。例如以下图所看到的:
插件使用:
1、创建新文档。
2、刷新iconfont面板(两次双击插件页卡,例如以下图红框所看到的)
推荐IconFont字体图标字库
阿里巴巴矢量图标库-Iconfont:http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库,包括了淘宝图标库和阿里妈妈图标库。
Fontello:http://fontello.com/
在线定制你自己的icon font字体图标字库,也能够直接从GitHub下载整个图标集,该项目也是开源的。
Font-Awesome:http://fortawesome.github.io/Font-Awesome/
一套绝佳的图标字体库和CSS框架,仅仅为Bootstrap设计,推荐学习和使用。
拓展链接:高效神器!
21款强大有用的PHOTOSHOP扩展插件。