&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
CSS3的自定义字体@font-face:如何将icon变成字体？
破洛洛文章简介：CSS3 icon font完全指南。
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法。
为什么要将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。
注：以上资料来自于：
注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。详情可查看：
在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& T
最后，在页面中使用这个字体：
&span class=&icon&&i&/span&
支持CSS3的浏览器可以更上流一点儿，我们每次修改html可能没那么方便，如果要改变某个icon，则可能需要修改相关字符，比如将i修改为e等。如果使用css3的伪元素，可以方便很多：
display:inline-
height:16/*占个位**/
.icon:after,.icon::after{
font-family:&emotion& T
display:inline-
content:&i&;/*在这里调用字符*/
margin-left:-16/*position:absolute什么的也可以，看具体情况*/
嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。
IE依然棘手：
因为IE9以前只支持eot格式，所以需要将ttf转换为eot先，这里可以使用微软官方的WEFT软件，也可以使用一些在线工具：
在线转ttf为eot格式；
强大的在线转ttf为eot、woff等字体格式
另外，eot文件必须添加域名白名单才可以使用，这里推荐使用CreateMyEOT：
其实，这种方法有一个不足，就是只支持纯色icon，最多能高端浏览器上实现渐变色或图形蒙板。
当然，我们有很多场景是用纯色icon，特别是在Windows 8这种Metro UI开始越来越多的时候。
另外，这种方法可以有效减少页面的请求，但是对于习惯使用的auto sprite功能的同学来说，这种方法对页面性能的提升不大。
但是对于移动终端，特别是webapp中，这种方法还是有很大的用武之地的，可以很方便的兼容多分辨率，配合离线存储效果更佳。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
原创/自译教程：如何制作icon-font？web字体？ttf?傻瓜教程送上(原创文章)
系统分类：
个人归类：
文章版权：
原创，如需商业用途或转载请与
联系，谢谢配合！
成都 / 设计爱好者353天前发布
小设计狮一只，突然这天，老大说“把图标给我做成一个字体可以吗？”瓦特？？图标字体？传说中的icon-font?偶买噶，弄了半天，要么 icomoon不能显示我上传的SVG，要么就各种出问题，怎么搞？研究一下午之后，得出了这个教程，走起~
& &嗯嗯，连接一个我的百度经验地址吧~方便大家看。 & &关于icon-font/web字体/ttf字体文件之类的，其实作为入行仅两年的小设计狮，我还是不怎么会接触到的，一方面自己虽然感兴趣，但是被工作困住了时间和思想，没时间研究，另一方面，我呆过的公司之前也没有大牛会用这样的技术（其实走出去看，大牛还是很多的，只是我“遇人不淑”而已……555555） & &但是今天，我们公司唯一一只大牛程序员欧巴，提出要把icon做成字体，我当时心里一惊，糟了糟了，我的短板要被人拔走了……但是！对，但是！但是我不怕~所谓“问题就是机遇”，我花了一下午，从零开始研究了如何把icon和那种不高清的位图变成可以随便使用的icon-font的ttf文件。过程之繁复，网上教程之多，可以说是步骤加起来可以绕地球两圈~哈哈哈 夸张说法啦……只是大多数知识点嵌套知识点，特别麻烦。 & &在过程中，我遇到很多问题，大多数的方面是不知道为什么，我的图上传到了icomoon以后显示为灰色的一片看不到，换了AI以后还是那样，后来找到了方法和问题，也就有了这个教程。 & &技巧和方法，主要是在AI的矢量图处理上面。想要没问题，那就记住这样干（画布一样大，黑白纯色图，矢量之类的。） & &花了一下午琢磨出来了这个教程，比较傻瓜式，也就是，超级容易入手的。那么，开始来看看吧~ & &嗯嗯……那么开始啦……首先，原谅我，是个几乎没有表情图的教程~~（看我真诚的小眼神~哦，隔着屏幕看不到……）这里偷个懒，直接用我百度经验的内容来写啦~1~~~~【要做的准备~】1.你需要一个矢量图（AI做的最好）2.你需要打开icomoon的连接~在线制作时使用~这里贴上网址~无毒无副作用~天然无公害~不用翻墙~
2~~~~【正式开始~】数学不好的我要重新数步骤咯~~~这里，以已经有了一个位图为例~灰色的，一个丑不拉几惊世骇俗的……额……丑图标。我们把它在AI里抠图来~填上一个红色~然后把红色的抠出来的新矢量图给复制下来。2.新建一个画布，（好吧，画布啊窗口啊文件啊什么的，你爱怎么称呼都好，不要在意这些细节），这里要注意的是，如果你每 个icon的大小不一样，那你至少得保证你的SVG画布一样大才行，新建的画布就和你切图时用的统一尺寸一样，一个标准就好，把你所有的icon都放进这 个尺寸里，调节大小，它们变成字体就不会错。这里楼主需要46*46的，所以建了46*46的。3.在新的画布里，粘贴出你刚才复制的新抠的矢量图~由于楼主的画布大小没有大变化，所以和之前步骤一中的图差不多，仔细看，可以看到，没有原来的底图了，只有我们同样丑不拉几的新抠的图标。4.下面，我们给我们的图标填充成白色。为什么要白色？因为程序员使用icon-font的ttf文件时，他们的默认颜色 一般是黑色和白色，具体的色值、大小、阴影特效等一切，由于制作完成后是ttf，和他们的代码字体没有区别，所以他们会自己根据需要来随时灵活变动，而不 是跟你说“噢设计狮~给我一个红的~绿色的也来一个~黄的也来一个~”他们可以自己来处理，不需要为了这种小事情打扰你。所以，你只需要把它弄成白色的就 好啦~怕变色以后看不到它了么？点击视图中的轮廓，就可以看到它啦~注意，变成轮廓的时候，其实没有黑色边框的啦~只是为了让你能够看到它才显示的哟~5.保存成SVG格式。保存以后，桌面上生成了一个看起来像是浏览器文件的东西，什么鬼？这是浏览器才能打开么？打开怎么 没东西？因为你是白色啦~看不到是很正常的~背景也是白色的嘛~哈哈哈……这个可以通过属性查看，它是SVG文档的格式。名字真的可以起这么随意么？当然 啦~在制作icon-font的页面里随时可以编辑起名字之类的啦~所以，不要在意这些细节，让我们飞快的进入下一步。6.进入icomoon，来来来，浪费一个步骤给大家看看我们的界面，最主要的功能集中在下面的三个导航按钮哦~自己制作的矢量图，用中间的那个就好，左边的按钮里可以从它的网站上选择海量图标，右边的是生成按钮，得上传或者选择以后才能使用。7.在icomoon中上传我们的图标。点击上传图标的按钮，就会打开文件夹，选择你存储的位置，选中刚才导出的那个 SVG图标文件就可以。放心，这并不是你上传给他们做资源~只是在线制作而已~并不需要你捐献自己的灵感~选择完以后，你会在icomoon上看到你的 SVG图标哟~是不是好神奇~别急呀~还有最后一两步啦~8.选中你这个SVG文件，并点击右下角的生成按钮，选择以后，你的图标会被有黄色描边的白色圆角矩形笼罩，不怕，点右下角的生成按钮。这时候跳转到了新的页面，我的上传图片中，绿色框中是你的图片命名等信息，我随便乱搞的。你会看到下载按钮在刚才生成按钮的位置，来，果断按下载，完成我们的制作，大功告成。注意，这里需要看你上方的几个操作按钮是否为选择按钮，如果是红色的删除按钮，那意味着你现在的鼠标就是个删除器，点一下就会从网页上取消你的上传操作，将会需要重新上传。编辑按钮就可以在这里直接对你的图标进行命名和CSS使用时的命名了。9.下载好了，在桌面有一个icomoon的压缩包，里面包含了所有的相关文件，怎么用？直接把这个压缩包或者解压后的文件夹发给你的程序员就好了，他会知道怎么用的。他不知道怎么用怎么办？打他呀！装逼不打草稿！不会用还敢叫我们做！！咳咳咳……来来来，秀一下我们的成果。这个字体文件，你自己也是应该可以用的，只是是图形而已，可以自己根据爱好来研究~【PS】到这里我们的教程就全部结束啦~有需要或者说得特别不对的，可以联系我，我来进行修改。本教程为完全原创~花了半个多小时来做示意和截图~尊重原创和动手精神~转载之类的，记得告诉我哟~如果觉得我的教程还不错~看起来够简单~够傻瓜式的话，别忘记给我点个赞哟~~~
成都 / 设计爱好者353天前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！