font-face自定义字体，iconfont就是把各种图片做成字体。iconfont优势：
字体文件小，一般20-50kb；
容易编辑和维护，尺寸和颜色可以用css来控制；
透明完全兼容IE6；
http://www.qianduan.net/zai-shuo-iconfont-he-font-face.html
webkit下可以做渐变：
margin: 0 0 0 50px;
font-size: 50px;
font-family: ‘HelveticaNeue-Light‘, ‘Helvetica Neue Light‘, ‘Helvetica Neue‘, ‘Helvetica, Arial‘, ‘Lucida Grande‘, ‘sans-serif‘;
background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
不支持的话，可以用伪类after before来模拟
使用：
@font-face {
font-family: ‘icon-fonts‘;
src:url(‘../fonts/icon-fonts.eot‘); /* IE9*/
src:url(‘../fonts/icon-fonts.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
url(‘../fonts/icon-fonts.woff‘) format(‘woff‘), /* chrome、firefox */
url(‘../fonts/icon-fonts.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url(‘../fonts/icon-fonts.svg#icon-fonts‘) format(‘svg‘); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: ‘icon-fonts‘;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;/* Better Font Rendering */
}
.icon-zan:before {
content: "\e600";
}
.icon-ask:before {
content: "\e601";
}
.icon-start:before {
content: "\e602";
}
.icon-down:before {
content: "\e606";
}
.icon-love:before {
content: "\e60c";
}
.icon-mi:before {
content: "\e604";
}
.icon-look:before {
content: "\e605";
}
.icon-comment:before {
content: "\e60a";
}
.icon-answer:before {
content: "\e603";
}
.icon-comment1:before {
content: "\e60b";
}
.icon-female:before {
content: "\e608";
}
.icon-male:before {
content: "\e609";
}
.icon-close:before {
content: "\e60d";
}
.icon-broadcast:before {
content: "\e607";
}
CSS3文字渐变：
<style>
h1 {
font-size: 60px;
text-align: center;
margin: 40px;
color: #000;
}
h1.methodA {
background: -webkit-linear-gradient(top, #1965a9, #000);
background: linear-gradient(top, #1965a9, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1.methodB {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.3) 50%, rgba(0,0,0,1));
}
</style>
<h1 class="methodA">Awesome Gradient Text Method A</h1>
<h1 class="methodB">Awesome Gradient Text Method B</h1>