Icon font font face

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>