教你如何把位图图标变成一个Web字体

今天闲来无事，在网上闲逛的时候发现一个很不错的东西，特来此分享，感觉用处还是很大的，特别是对于咱们这些服务器资源紧张的草根来说！

对于站长来说，网站中使用图标是必不可少的，图标技能美化网站又能让用户快速的找到各种分类，但是图标太多又着实影响网站速度，那要肿么办呢？鱼与熊掌不能兼得啊！

今天多姿就介绍一下这个鱼与熊掌同时兼得的好方法，废话不多说，下面咱们进入正题。

使用图标字体的优势

• 适应性：图标字体不是图像文件，那么它的大小会小很多，特别是如果你已经开始使用自动适应的双尺寸的图像（即同时支持电脑端和手机端的网站），那么就有不同的需求，图标小了，在大分辨率下图片分辨率就会降低，反之亦然。而使用图标字体，无需下载图像，你的图标将瞬间呈现，这样网站速度就提升了。
• 可扩展性：图标字体可以结合CSS设置为任意大小。同时兼任不同的设备终端。
• 灵活性：文字效果可以很容易地应用到你的图标，包括颜色，阴影和翻转状态都可以随意改变，永不着每次都要根据网站风格，重复去做图标。
• 兼容性：现在市面上所有的浏览器均支持Web字体，即使IE6和更早版本都能很好的兼容。

下面说说怎么样来制作Web字体

制作Web字体我们需要用的是一款名叫IcoMoon的在线应用，使用方法简单，而且界面不复杂，不懂英文你照样完成所有程序。它目前免费提供的图标打倒了3800枚，当然你也可以自己利用Adobe Illustrator设计自己需要的图标，到这里转换成Web字体。

第一步、打开IcoMoon在线应用程序，你会看到如下的界面

好吧，刚开始看到这个界面是不是感觉无从下手？没关系咱一步步来。

第二步、选择你需要的图标，然后转化成字体，这个不太好说明，还是看图熟悉一下界面吧

第三步、界面熟悉了就好办了，如果你直接在这里选择图标生成，而不是自定义的话；那么首先选择你喜欢的图标（这时上面一定要选择哪个选择工具哦，就是箭头），然后直接点击下面的“Font”按钮，然后再点下方的“Download”按钮，你选择多少他就就自动打包，等打包完成后他就自动开始下载了，完工。

下载后的压缩文件里面，包含了预览，里面含有html、css、ttf、woff、svg这些个文件，你可以直接打开index.html文件预览。

预览文件你可以看到如下内容：

我擦，这是不是太简单了点？很明确的告诉你，他就是这么简单！

关于自定义生成Web字体的方法将在下一个教程里面说到，好了，教程就到这里，一个字一个字的码累啊，各位要是觉得好方法好，请别忘记顶一下多姿！

=============================================

如何把自己做的图标转换成web字体教程已出   请点这里

Demo:Web字体在线演示

对了icomoon的地址是http://icomoon.io/app 到这里生成！

首页是http://icomoon.io 可以获取更多其他的信息！

欢迎转载本文章，但是请带上文章的出处：http://dz9.net  谢谢！