Icon Font font face

font-face A custom font,Iconfont is to make all kinds of pictures into fonts. IconfontAdvantages: Small font files, general 20-50kb; Easy to edit and maintain, size and color can be controlled by CSS, transparent fully compatible with IE6;  Http://www.qianduan.net/zai-shuo-iconfont-he-font-face.html you can do gradients under 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; If not supported, you can use pseudo-class after before to simulate using:

@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 text gradient:<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));} &LT;/STYLE&GT;&LT;H1 class= "MethodA" >awesome Gradient Text Method a

Icon Font font face