使用@font-face运用本地字体，制作一些特殊的字体效果非常方便，特别是使用@font-face制作图标，更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体，这样一来就有很多同学在问，如何制作自己需要的字体呢？或者说如何将自己需要的图标转换成自己需要字体，在运用到web页面中？这个问题问得很好，其实实现思路并不复杂，我们需要通过一些适量图的软件，绘制出矢量图标，然后通过一定的工具将这些图标转换成需要的字体。或许你会说，这不是废话，还是没有谈到怎么做出来。大家不用着急，根据Martin Gittins的《How to turn your icons into a web font》文章介绍，你只需要一款制作矢量图的应用软件，和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信，不仿往下看，我想你看后，以后再也不会使用位图了。（^_^）

图片是有诸多优点的，然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”，因此，有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便，为了解决这些问题，CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密，也不是什么新技术，在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“，从教程中，你可以找到@font-face制作图标的优势与不足，同时也能找到要如何得到制作图标的字体。

Font Awesome是Dave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大，并通过CSS中字体相关的CSS对图标进行美化，比如说可以改变图标颜色、大小和增加阴影等，但他也存在一定的弊端。为了使用部分图标，不得不加载所有图标的样式。如果你使用Sass将可以改变这一切，今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面，不仅仅是针对于物理尺寸，而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下，都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites，并将其保存为.gif或.png文件。然而，更糟糕的是图片根据响应式内容不断的放大，对于位图图像会产生锯齿，而且会越明显。更糟糕的是，CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

网页字体图标到现在来说并不是一个新话题，大家都知道是通过@font-face来实现的。虽然有很多地方介绍如何制作属于自己的网页字体图标，但大部分都还是需要收费。让你我们这等屌丝无法接受。除了这些之外，其实还有一些制作矢量图的软件可以实现自己的图标。在这篇译文中，就详细介绍了如何使用Inkscape软件制作出自己的网页字体图标。

最近在互联风上有关于Web字体的性能表现讨论的越来越多。自定义的Web字体使用虽然还在持续增长，但是没有过多的人考虑其实际性能。基本的@font-face使用方法至使用户加载字体受到阻塞。我去了解了@font-face以及寻找问题所在，并且探索改善字体加载性能，使使用Web字体的性能更好，加载字体更流畅。

Web排版和传统的印刷排版之间的差距不是一点点，而且Web排版一直以来都令Web开发者感到头痛，由其是Web中的字体。或许你在平时开发Web页面或Web应用的时候已经发现在Web上需要渲染一些更具艺术风格的字体，或者希望在响应式Web排版的设计中让文字能根据断点做出相应的响应等。虽然通过一些技术手段可以实现类似的效果，但同时也会造成许多新的问题产生。幸运的是，2015年开始推出了OpenType字体格式，以一些非常显著的方式改变了开发者面临的实际困难。他们有能力在较小的文件下为Web带来更丰富的排版性，但随着新的可能性和优势，新的挑战和复杂性也随之出现。那么，OpenType字体的引入之后会给Web带来什么样的变化？我们又应该在Web中怎么使用？接下来，我们一起来探讨这方面的话题。