周刊3# Web字体图标专刊
作者：大漠 日期：2014-11-02 点击：2189
使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体，这样一来就有很多同学在问，如何制作自己需要的字体呢？或者说如何将自己需要的图标转换成自己需要字体，在运用到web页面中？本周特意推出Web字体图标专刊，帮助大家解决这方面的问题。
@font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。这篇文章分享的主题就是使用@font-face配合一定的字体来制作Web页面中的Icon图标。
自定义Font Icon
Fontomas为大家提供的多种字体图标的文件，我们可以下载所需的字体，通过FontSquirrel或者OnlineFontconverter工具来帮助我们转换成所需的字体。文章一步一步介绍了如何使用FontSquirrel将Fontomas下载下来的字体转换成所需的字体文件，帮助大家自定义需要的Web Font Icons。
如何把你的图标转换成web字体
使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。如何将自己需要的图标转换成自己需要字体，在运用到web页面中？这是很多同学关注的一个问题，文章主要介绍了，通过一些适量图的软件，绘制出矢量图标，然后通过一定的工具将这些图标转换成需要的字体。
为什么要用和如何使用字体图标
使用@font-face制作图标已不是什么秘密，也不是什么新技术，在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“，从教程中，你可以找到@font-face制作图标的优势与不足，同时也能找到要如何得到制作图标的字体。
如何制作自己的网页字体图标
网页字体图标到现在来说并不是一个新话题，大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标，但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外，其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中，就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。
Inline SVG vs Icon Fonts
当你为一个网站建一套图标系统的时候，你有几种选择。如果你知道图标需要是像素画图片的时候,你可能会用到css sprites也就是雪碧.而如果图标需要是矢量图的时候(现在已越来越普遍)，你有两种选择，他们是svg和图标字体。
为什么抛弃Icon Fonts而选用SVG
Icon Fonts能解决图标缩放、颜色等问题，但Icon Fonts自身还是存在一定的问题。Thomas Fuchs在这篇文章中详细剖析了Icon Fonts和inline SVG的优略点，阐述了为什么要在Web开发中抛弃Icon Fonts而选用SVG。
图标字体化浅谈
在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实践发现了一种比较好的解决方案，图标字体化。这篇文章详细介绍了如何制作字体，并且如何运用到实际项目中，以及在制作使用中需要注意的细节。
Illustrator与IcoMoon制作Web Icon
Icons在Web设计中可以起到画龙点眼之作用，但当前时代使用图片Icon，在Web中起到的限制越来越多。以致于SVG、Web Font等方式来制作Icon，因为这些方法制作出来的Icon是矢量图标，可以随意放大缩小，修改颜色等。这篇文章中就介绍了如何使用Illustrator制作图软件和IconMoon应用，制作一套适合自己站点的Web Font Icon。
使用Grunt创建icon字体
大多数制作图标字体都是由SVG字体文件转换成其他格式字体文件，而这个转换过程都依赖于第三方工具来实现。在这篇文章中，作者向大家介绍了如何使用Grunt来转换字体文件格式。实现从人工转换到命令转换的一个过程。
如何制作自己的符号（symbols）字体
随着Retina屏幕的出现，这也意味着位图已无法完全满足业务的需求了。如果为了满足Retina屏显示需求，就需要增加位图尺寸，从而增加文件大小，这在移动端上是一笔不小的开销。解决这个问题，就是在项目中使用矢量图(SVG),因为他能在Retina屏下不让图标失真，而且文件也小。而大家常用的是字体图标，因为他得到很好的支持。不过在这篇文章中向大家介绍了如何制作自己的符号（Symbols）字体，用其制作Icon。
八步制作Icon文件
如何使用字体文件来制作Icon并不是难事了，但对于很多同学来说，如何将自己的矢量图变成SVG格式字体，并且将SVG格式字体转换成别的格式字体，然后制作出自己的图标，还是一件蛮困难的事情。在这篇文章中有一个制作字体文件的指南，只需要你跟着作者一步一步往下操作，你只需要经过八步就能顺利将自己的矢量图转换成图标字体，从而制作出一套完全属于自己的图标。
2014年20个优秀的字体图标资源
作者收集了2014年20个优秀的字体图标资源，包括了Font Awesome、Weather Icons、Mono Social Icons Font、Map Icons、Github Octicons、Open Iconic、IcoMoon、Marka、Ionicons、Socialicious、fontelico.font和Glyphicons等。可以是姓罗万象，涉及面之广。
