从事前端的朋友应该对 "字体图标" 这个词汇不陌生,为了适应越来越挑剔的屏幕,网页图标和简单图案使用. png 来搭建已经基本上被淘汰了。取而代之的是使用 CSS3 和 svg 来绘制,而对于网页小图标,我们更希望在整个系统的前端架构中将它们做成字体库统一管理。如下图:
undefined
undefined
如果在任意一个页面只需要引用一个 css 样式就能实现库中的任意一个图标,而且只需要定义 font-size 就能控制图标的大小,是不是很方便?
undefined
这里先跟大家推荐两个管理字体图标库的工具网站:
undefined
icomoon.io
undefined
www.iconfont.cn/plus
undefined
icomoon 大名鼎鼎,不过个人认为 iconfont 阿里巴巴的矢量图标库更符合国人的使用习惯,可以托管图标,更方便做版本管理,不过缺点是阿里巴巴会对你上传的图标对所有人开放下载,而且每个图标必需限制在 20k 以内。
undefined
下面我从 svg 绘制和代码实现两方面将初次制作字体图标遇到的坎和大家分享一下,愿后来者不要入坑。
undefined
1、svg 绘制
undefined
首先我们要准备的是矢量图绘制工具,这里我选择 illustrator,以下是设计师给我的原图:
undefined
undefined
好,我先直接对它导出看看效果
undefined
undefined
除了文字,所有部分都不能用,而且蓝色的背景色是不能要的,不可能以后修改了背景色还要去修改图标。
undefined
为了找到是什么原因造成的,我对图标进行了重新绘制。
undefined
undefined
导出看了一下效果
undefined
undefined
好了之前唯一可用的文字也没了,于是在 google 和百度上查,最后找到了一则制作说明:
undefined
undefined
按照要求,我对外面的这个圈,文字(要先进行创建轮廓操作),箭头,还有问号下面这个点进行了轮廓化描边
undefined
undefined
哈哈,完美!
undefined
其实在制作过程中还是碰到了一个小问题,因为 iconfont 要求制作完成的 svg 必须要小于 20k 才能上传,由于我之前对 illustrator 工具的不了解,按照以前使用 Photoshop 的习惯,对不需要导出的画板和图层进行隐藏,然后存储为 svg 格式,但是文件的大小一直下不来:
undefined
undefined
我一直以为是我绘制的问题,实在找不到原因,于是改变画布的大小在尝试,这种做法可能有点傻,尝试之前我就知道矢量图尺寸跟文件的大小没有一丁点关系,但是也算是瞎猫碰上死耗子,当我增加了一个小画板再存储的时候看到了:
undefined
undefined
切换小画板再储存确实让文件的大小下来了,算是临时解决问题吧,但总觉得应该有更好的方案,这么做太麻烦了,导出之前还得记住画板的序号,这太反人类了,直到有一次我无意中将工作区切换成 web 工作模式:
undefined
undefined
原来直接可以将绘制好的图像拖到资源导出的区域,我是在完成所有的工作之后才发现这个功能,想想浪费的时间,心塞塞的~~~
undefined
煽情到此为止,其实也就是对自己浪费时间的一个安慰而已。
undefined
2、网页实现
undefined
解决了 svg 的绘制问题之后网页上实现就非常简单了,甚至 iconfont 都已经把代码给我们写好了:
undefined
undefined
css
undefined
- svg {
- background: red;
- }
undefined
undefined
- <script src="http://at.alicdn.com/t/font_nbcbmernh4pr2j4i.js">
- </script>
- <svg>
- <use xlink:href="#icon-trouble">
- </use>
- </svg>
undefined
这段 js 其实就是对 svg 的一个封装,更方便我们管理图标和实现。
undefined
雁过留声,阅过点赞哈~~~
来源: http://www.cnblogs.com/Jermey/p/6128892.html