什么是 iconfont
iconfont就是字面上的意思,叫做“字体图标”,将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调用。
为什么要使用 iconfont
在互联网刚起步的时候,较多使用的是png图片,但是png图片更换起来很麻烦, 并且自适应效果很差,有时候会出现锯齿以及马赛克模糊的情况,加载起来也较慢,影响用户体验。
iconfont 的产生就是来解决上面的问题,将 icon 做为字体来使用,它具有很多优势:
对 web 和 app:
-
弹性,在网页或者 app 上,展示字体是很便捷的。用 iconfont 可以很方便的改变 icon 的颜色,或者加入一些其他的效果。
-
可缩放,可以很方便的改变图标的大小。
-
矢量,iconfont 是矢量的并且具有独立的分辨率,不管在高分辨率还是低分辨率,不管是在网页还是手机端,都具有很好的展示效果,不会出现锯齿或者马赛克模糊。
-
节省加载时间,iconfont 很小,每个小图标只有几 kb,大大节省了加载时间。
对设计师来说:
- 可以本地使用,这个是我最喜欢的功能,将 iconfont 安装到本地的系统上,然后就可以在Ps,Ai,Sketch这些设计软件里使用啦~
推荐的两个 iconfont 工具
那么对于设计师来说,要做 iconfont 需要怎么操作呢?
首先,需要一个转换设计稿的平台。
目前,国内用的最多的是阿里巴巴矢量库,优点是这是国内的中文网站,使用起来无语言障碍,缺点就是版权问题,因为上传上来的图标全部是做为公开库的,其他人可以进行浏览下载。以下是阿里巴巴矢量库的官方免责声明。
在此,推荐一个国外的网站,iconmoon 创建于2011年,其上有很多成熟的图标集,大多数都是精心制作,要收费的,可以看看拿来参考。主要还是要用它提供的制作 iconfont 的功能。
如何使用 iconmoon
第一步
将设计的 icon 导出成 svg 文件。我做了一个 icon 参考线的sketch文件,其中有64x64,32x32,24x24三个尺寸,以此来保证一套图标中 icon 大小的一致性。文末提供下载。
enter image description here
第二步
打开iconmoon网站,点击 import icons 按钮,选择刚刚导出的 svg 格式的 icon,要注意的是,图标不能直接使用描边,要用布尔运算做成填充样式的,要不上传的图标在缩放的时候会遇到问题。
第三步
点击右下角的 generate font,再点击 download
enter image description here
第四步
会得到一个zip的压缩包
enter image description here
解压出来,可以看到有demo,有字体文件,也有使用代码
enter image description here把这个文件夹直接给开发就ok啦~
如何在本地使用 iconfont
那么,如何在本地使用 iconfont 呢?
第一步
像安装正常字体文件一样安装刚刚解压的文件夹里的 .ttf 文件
enter image description here
第二步
打开 demo.html 文件复制里面的图标代号到 sketch 里面,复制如下图绿色部分。
enter image description here
第三步
选择字体,可以看到图标就出现了,可以像处理文字一样的处理图标,改变它的大小和颜色。
enter image description here
网友评论