无图片字体icon - 码农教程

W3C 仍然在对 CSS3 规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多，但一直懒于写blog，也经常会出现一些知识点重复去查询，一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中，于是鞭策自己尽量多的习惯去记录，也为了知识更好的分享与积累吧。

现在来看，应该大家都接触过css3的自定义字体（@font-face），也应该知道各个浏览器都支持（包括IE6），只是各自对字体文件的格式的支持不一样。

为什么要将icon做成字体？

字体文件小，一般在20K左右吧（icon图片各种尺寸大小以及各种图标多）
容易编辑和维护，可用css直接对字体控制大小和颜色（图片的话修改一个也许是修改好几个尺寸）
透明完全兼容IE6（图片透明度兼容不好）
移动端分辨率多，字体icon不会出现失真等问题（移动端分辨率多，各种尺寸多，或者大图压缩浪费资源。）

怎样才能将icon变成字体？

将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体
用字体编辑软件，比如FontCreator、FontLab等
PSD–>eps–>FontLab（这里用FontLab为例），也就是将PSD转换为illustrator的eps格式，然后再将某个字符复制到FontLab中。

实际举个例子吧

打开设计稿psd，将内容保存为photoshop eps格式

在illustrator中打开保存的eps文件，取消分组，然后点选icon，复制。
打开FontLab，随便打开一款字体文件，这里用tahoma.ttf为例：

双击或全选某个字符，删除原有的图形，粘贴刚复制的icon对象。生成字体文件就可以了。

查看字体对应字符，在该字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：

可以看到字体对应的字符是odieresis，unicode编码是00F6。而实际字体图像已经变成“+”了。

字体格式的浏览器支持： 先使用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.cn以及webfonts.info 注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。

然后，在icon元素上使用该字体就好了：

.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;}.icon-liebiao:before { content: "e600"; }

到此我们就基本能算大功告成了。 IE9以前只支持eot格式，所以需要将ttf转换为eot先。可以使用微软官方的WEFT软件，也可以使用一些在线工具： http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式； http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式另外，eot文件必须添加域名白名单才可以使用，推荐使用CreateMyEOT：

最后是字体文件跨域问题： 这个是在实际项目中出现的问题，找了几种方式。有些是要服务器上去配置，前端能解决的，目前我是用很强盗的形式，把这个存在跨域问题的文件，转成base64编码，比如ttf文件，只需要找一下转成base64的就行。

例如我这个把文件往上面一拖，把这段编码copy到css文件就行。(注：此工具是同事as3long制作。特此感谢。)

总结： iconfont已经很强大了，轮子是否需要继续创造，就看团队了。 css3很强大，html5标准也终于完工，未来的路很长，人很累，所以先吃饱再说。