iconfont
一个阿里爸爸做的开源图库,人家还有专门的 github issue,但人家的图标数量还是很惊人的,不仅有几百个公司的开源图标库,还有各式各样的小图标,还支持自定义创建图标库,所以不管你是一家创业公司还是对设计很有要求的公司,它都能很好的帮助你解决管理图标的痛点。你想要的基本都有~
为什么要将icon做成字体?
在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8 alpha透明或者png8 index透明等。
比如,twitter用到的各种小icon:
这种情况下,使用字体来实现图标就有很多优势:
字体文件小,一般20-50kb; 容易编辑和维护,尺寸和颜色可以用css来控制; 透明完全兼容IE6; 如何将icon变成字体?
最关键的是要将设计稿中的icon(要有矢量路径,位图没法转化)完美还原成字体,这并不是很麻烦。
我们要用到一些字体编辑软件,比如FontCreator、FontLab等,这里我们用FontLab来演示。
还原步骤很简单:
PSD–>eps–>FontLab,即将PSD转换为illustrator的eps格式,然后将某个字符复制到FontLab中即可。
具体步骤:
打开设计稿psd,将其保存为Photoshop eps格式,我们这里以Qzone中说说发表框的表情icon为例:
在illustrator中打开保存的eps文件:
取消分组,然后点选某个icon,复制。
打开FontLab,随便打开一款字体文件,比如tahoma.ttf:
然后双击某个字符,将原有图形删除,粘贴刚才复制的icon对象:
调整图形大小,一个icon就完成还原了。
就是这么简单。所有icon还原完之后,生成字体文件就可以了。
查看字体对应字符,可以在字体列表中,在某个字体上右键查看属性(快捷键Alt+Enter),查看该字体对应的字符:
可以看到字体对应的字符是i,unicode编码是0069。
字体格式的浏览器支持:
目前,各个浏览器对字体格式的支持是最大的区别:
webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,iOS 4.2以下只支持SVG字体; Chrome:除webkit支持的以外,从Chrome 6开始,开始支持woff格式; Firefox:支持.ttf和.otf,从Firefox 3.6开始支持woff格式; Opera:支持.ttf、.otf、.svg。尚不支持woff Opera 11开始支持WOFF(多谢Apostle提醒~~); IE:只支持eot格式,IE9开始支持woff。
注:以上资料来自于:webfonts.info
注:woff是最新的web开放字体格式(web open font format),w3c推荐,主要优势是针对浏览器进行优化,字体文件小。详情可查看wiki:
在CSS中使用icon字体:
先使用font-face声明字体:
@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}
然后,在icon元素上使用该字体就好了:
.icon{font-family:"emotion" Tahoma;
...
}
最后,在页面中使用这个字体:
<span class="icon">i</span>
iconfont 三种使用姿势
unicode
最开始我们使用了unicode
的格式,它主要的特点是
优势
- 兼容性最好,支持ie6+
- 支持按字体的方式去动态调整图标大小,颜色等等
劣势
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别,在不同的浏览器或系统中对文字的渲染不同,其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响,而且这种影响调整起来较为困难
使用方法:
第一步:引入自定义字体 `font-face
@font-face {
font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步:定义使用iconfont的样式
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont"></i>
效果图:
其实它的原理也很简单,就是通过 @font-face
引入自定义字体(其实就是一个字体库),它里面规定了
这个对应的形状就长这企鹅样。其实类似于 '花裤衩',在不同字体设定下长得是不同的一样。
不过它的缺点也显而易见,unicode
的书写不直观,语意不明确。光看
这个unicode
你完全不知道它代表的是什么意思。这时候就有了 font-class
。
font-class
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
使用方法:
第一步:拷贝项目下面生成的fontclass代码:
../font_8d5l8fzk5b87iudi.css
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
效果图:
它的主要原理其实是和 unicode
一样的,它只是多做了一步,将原先
这种写法换成了.icon-QQ
,它在每个 class 的 before 属性中写了unicode
,省去了人为写的麻烦。如 .icon-QQ:before { content: "\e604"; }
相对于unicode
它的修改更加的方便与直观。但也有一个大坑,之前楼主一个项目中用到了两组font-class
由于没有做好命名空间,所有的class都是放在.iconfont
命名空间下的,一上线引发了各种雪崩问题,修改了半天,所以使用font-class
一定要注意命名空间的问题。
symbol
随着万恶的某某浏览器逐渐淡出历史舞台,svg-icon 使用形式慢慢成为主流和推荐的方法。相关文章可以参考张鑫旭大大的文章未来必热:SVG Sprite技术介绍
- 支持多色图标了,不再受单色限制。
- 支持像字体那样通过font-size,color来调整样式。
- 支持 ie9+
- 可利用CSS实现动画。
- 减少HTTP请求。
- 矢量,缩放不失真
- 可以很精细的控制SVG图标的每一部分
使用方法:
第一步:拷贝项目下面生成的symbol代码:
引入 ./iconfont.js
第二步:加入通用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>
使用svg-icon的好处是我再也不用发送woff|eot|ttf|
这些很多个字体库请求了,我所有的svg都可以内联在html内。
还有一个就是 svg 是一个真正的矢量,不管你再怎么的放缩它都不会失真模糊,而且svg可以控制的属性也更加的丰富,也能做出更加生动和复杂的图标。现在ui设计师平时都喜欢使用 sketch 来工作,只要轻松一键就能导出 svg 了,所以 svg 也更受设计师的青睐。Inline SVG vs Icon Fonts 这篇文章详细的比较了 svg
和 icon-font
的优劣,大家可以去看看。PS:这里其实还用到了 SVG Sprite
技术。简单的理解就是类 svg 的似雪碧图,它在一个 svg 之中运用 symbol 标示了一个一个的 svg 图标,这样一个页面中我们遇到同样的 svg 就不用重复再画一个了,直接使用<use xlink:href="#icon-QQ" x="50" y="50" />
就能使用了,具体的细节可以看这篇文章开头的文章 未来必热:SVG Sprite技术介绍,在之后的文章中也会手摸手叫你自己如何制作 SVG Sprite
。