当你打开（绝大部分）网站，页面上将会有许多形形色色的小图标（icon），适当的icon的可以达到一图胜千言的目的，使网页的表现效果更佳。
关于页面icon的制作，比较传统的方法是，让设计师去设计一个个的小图片，然后网页程式员再将设计好的icon放到页面上适当的位置。不过，随着这些年Web前端技术的迅猛发展，现在有一种新的方案去制作页面icon，那就是webfont。
本文将较为详细的介绍页面icon及webfont的方方面面。
页面icon
什么是页面icon
如下图所示，
天猫商城 中左侧的导航栏中，每一个购物频道都有一个小小的图标，这些小图标就是页面icon的一种表现方式。
除此之外，页面icon还有多种表现形式，可能出现在页面的任何位置。
传统icon的制作
我们再来看看 百度 域下的资源文件，其中有一个 图片文件 ，如下图，
从图中可以看出来，这个图片中有很多的小图标，这些小图标按照一定的顺序排列在一起。
上面这种方式就是我们所说的传统制作和使用icon的方法。
首先要求设计师设计好大小合适的小图标，然后将这些小图标按照一定的顺序和方式合并在一起（这种方式称为css sprite，或者图片精灵），然后网页程序员通过书写css代码来控制相应元素的 background-position 属性，以达到不同元素显示不同的小图标。
这种方式下，需要使用小图标的页面元素的css规则一般这样定制：一个表示图标类的 icon 样式，以及表达不同小图标的自定义类名，比如 icon-home ， icon-user 。当然，具体css类名的命名规范是不定的。一般地， icon 和 icon-* 的样式内容如下，
.icon { background-image: url(...) } .icon-home { background-position: 0 0; } .icon-user { background-position: 0 10px; }
这种制作和使用icon的方式现在仍然有许多企业和网页正在使用，也是一种比较常规的方式。这种方式在书写css代码需要有一定的耐心，要匹配好各个icon的 background-position 属性。
值得一提的是，这种方式有一个不可避免弊端，就是，可能页面的icon需要两种以上的尺寸或者icon要发生变更。前者一般会要求设计师产出多套的icon，因为直接对图片进行缩放在网页上的表现并不是很好；后者可能就要重写之前的css代码了，因为可能图片雪碧后的position也发生了变化。
webfont与@font-face
什么是webfont
随着这些年Web前端技术的迅猛发展，web font技术逐渐成熟。那么什么是web font呢？
web font，又称之为 在线字体 或者 网络字体 ，是CSS3中的一个模块，主要是把自定义的特殊字体嵌入到网页中。无需安装，无需下载，直接在线使用。
文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站
