怎么玩耍图标字体.

网站上的图标越来越多,图标颜色也是越来越多,用 Sprite 来做也难免力不从心.

CSS3.0的出现,带来了 @font-face; 可以将自己定义的Web字体嵌入到网页中,既减少了 http 请求,也能做出各种各样大小不一颜色不一的图标.

先去 icomoon 制作出属于自己的图标字体文件.

然后放到 项目目录中,通过 css 的url 去引用它.

@font-face {
　　//　　定义名字
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot');
    src: url('fonts/icomoon.eot') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.web-font{
　　//　　调用字体 
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}