Icon font font face

时间:2022-09-26 17:07:11
font-face自定义字体,iconfont就是把各种图片做成字体。iconfont优势:
字体文件小,一般20-50kb;
容易编辑和维护,尺寸和颜色可以用css来控制;
透明完全兼容IE6;
 
 
 
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>