icon font的理解，制作和使用

        作为一个刚刚起步做web前端开发的菜鸟来说，每次学习到一些奇妙的，能够增进用户体验的技巧的时候，我总是兴奋不已，不得不说，这感觉太棒了。
        所以，当我开始第一次尝试制作一些简单的页面交互（比如变色，移动，显示隐藏。。）的时候，毫无疑问，我非常兴奋。我看过一篇淘宝UED翻译的文章《身未动，心先知》，大致是关于模式识别的本能及其在设计中的运用。简单说来就是：用户在使用一个产品之前，对这个产品可能已经有了一定的认知，这些认知来自之前使用类似产品留下的一些习惯，或者来自用户自身基于经验的一种思考（这不是原话，是我个人看过文章之后的理解），把这种认知理解为是大脑中形成的一种模式。Jonah Lehrer在《How We Decide》一书中写到，当我们识别出一些现实生活中为我们所熟悉的模式时，大脑就会分泌出那种可以带来快乐的神经系统化学物质—多巴胺。而当你遵循这个模式完成一件事并取得成功，快乐之源多巴胺就会给你再来一次额外的脉冲刺激，相反的，模式出错就可能带来焦躁。（一直到这里，文章跟标题内容似乎还没有多大关系，但我很愿意写这样一段，因为我确确实实有这样的感受。）

        将这一理论运用到页面的交互设计中，一个比较好的交互设计是，能够让使用者觉得“它果然是这样！”（这也是个人理解）。当然，文章的最后也提到，各个平台、浏览器和软件里都存在不一致性，这些不一致各有各来由，从专利问题到设计习惯都是其产生的原因。而交互设计随着时间必定会发生改变与前进，如果设计能带来意料以外的乐趣，并且没人因此受伤（也没有数据被破坏），那么设计就能激发意料以外的欢愉，从而被快速上手，取代掉你一直想更改的旧有设计。（直到这里似乎依然没什么关系。再往深入讨论就没必要了，推荐大家关注TaoBao UED——地球上最好的UEDued.taobao.com/blog/）

        到目前为止，抛开那些非常生动，富有创意的动画交互效果，我觉得，有一个最经典的交互就是鼠标悬停动作，不论是变色，换背景，还是其他更复杂的，由于鼠标代表着用户的视线，就简简单单的一个变化，已经足够抓住用户的眼球。就是这样一个经典，几乎任何网站都会有这样的交互，任何人，都会觉得“当我鼠标移过去的时候，应该会发生点什么”。所以我们发现，页面上一些看似不起眼的，简直不能叫图片的‘图片’，也担当着这种交互的职责。你可以滚动当前页面到最底部，有联系邮箱或者服务热线，操作你的鼠标，去尝试靠近他们吧。看！

          直到我看到这个之前ued.sina.com.cn/?p=1295（新浪UED，里面其实已经详细说明icon font的制作和使用，你可以看里面的，当然我非常不反对你继续切回来关注我的文字），我还一直只会使用切换图片或者背景这种招数（有时候确实不得不这么用，毕竟有像企鹅，新浪眼这种不是纯色的图标）。我甚至因为懒，到目前为止还没有p过一张真正的sprite图片来实现图片数量压缩，尽管刚知道sprite的时候我也是非常得兴奋。但是我总是觉得不舒服，因为每当我碰到图片的时候，我总是感觉非常沉重，一个是抓图太烦，工作量太沉重，还有一个是图片本身体积就是沉重，尤其是这种小图，它实在不应该是一张图片。像这种‘图片’，似乎更应该是一个有象征意义的文字，它跟文字一样，起着描述的作用。所以我觉得，icon font这种方式，真的是太合适了。

        既然作为font，一种字体，所以在页面上，它可以享受与文字一样的css待遇，可以像操作文字一样操作它，非常方便，而且就算是放大缩小，也不会影响显示效果，因为它是文字，不是图，这对于需要考虑终端浏览器窗口大小响应式开发来说，至关重要。它还可以省下截图，对齐图片这些时间，对于后期维护来说，也是非常有帮助。所以，你现在也知道，icon font到底是个什么，为什么要用它。总之，icon font就是使用一种个性化的字体来代替页面上的纯色图标，以达到便捷的交互和维护的目的，它省去了建立连接和载入图片的时间，代价只是几十k的字体文件空间和前期的字体制作时间。所以，如何快速制作一个方便维护和使用的icon font开发规范就是下一个问题。

        上面给的新浪UED链接介绍了使用font creator和ps配合制作字体文件的方法，其中还给了一个字体文件转换的在线地址：http://www.fontsquirrel.com/fontface/generator。

这个有用，可以留着。下面是想推荐一个非常好用的在线icon font生成工具icomoon.io/app

这上面提供了很多漂亮实用的图标，也可以自己import你的svg文件，或者从他的库中添加，导入后像这样显示。高亮的那些是被你选中拿来制作字体文件的图标。

这三个工具分别拿来选择，删除，编辑，不多说，主要是那个编辑，可以调字体大小，最好填上有意义的tagname，这些tagname中的第一个会被自动拿来做css类名。

选完需要的图标就点页面底部这个按钮来生成字体，

把图标上方的输入框内容改成你希望的字符，这样方便你使用，不然就只能通过unicode字符来输出了。

这一切都做好后点击download下载你的字体文件，是一个压缩包，解压出来里面有一个fonts文件夹放了五个字体文件（由于浏览器兼容问题，需要有这些不同的字体文件，而且都要添加成页面字体）。解压出来还有一个css文件和一个html例子，教你如何使用的，其中html文件在浏览器打开后可以看到你设置出来的文字，和它们对应的类名。我是这么来使用的，在css文件里面给页面添加字体

@font-face {	
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');	
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    	    url('fonts/icomoon.woff') format('woff'),
    	    url('fonts/icomoon.ttf') format('truetype'),
    	    url('fonts/icomoon.svg#icomoon') format('svg');	
    	    font-weight: normal;	
    	    font-style: normal;
}

这样就可以使用这个名为‘’icomoon“的字体了，这名字可以自己定义，但是路径和文件名一定要对。我把fonts文件夹直接放到css文件同一个文件夹中了，不知道这会不会带来一些坏处，不放心的话可以自己放置，改一下路径，服务器也要配置好。然后就可以继续定义一个类使用这种字体，当需要用到的时候，挂上这个类名就行了，像这样：

.icomoon{font-family: icomoon;}

<ul class="contentWrapper">
				<li><p>我是第四段话qu<span class="icomoon f10">w</span></p></li>
				<li><p>我是第五段话rty</p></li>
				<li><p>我是第六段话uiop</p></li>
		</ul>

页面中就会这么显示： ， 最后那个向上的箭号就是html中的”w“，它是一个字。这种在html中直接输入的方式，在实际应用过程中可能需要后端人员帮忙，可能也是考虑到这个原因，很多网站并不是这么使用，而是直接通过css的after或before伪类来插入content。具体可以看看github首页的那几只小猫和其他一些图标，这也是一个非常好的使用icon font的例子。如果之后需要添加或者更改字体，就再通过icomoon来导入，编辑，或者用font creator修改，如果第一次字体文件就考虑成熟的话，这种修改的机会应该比较少。接下来你就可以方便得使用这种方法了。
        关注前端，关注用户体验。与前端新手们共勉！