css3图标变成字体

CSS3图标变成字体

随着CSS3技术的发展，制作网页时可用的效果变得越来越多，其中一个比较流行的效果就是把图标制作成字体，通过字体的方式在网页中使用。这种方式比直接用图片好处在于可以根据需要设置字体大小、颜色等属性，还可以实现鼠标滑过、点击等效果。

//定义字体
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
//设置样式
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
//使用字体


上述代码中，首先定义了一个字体，定义的方式和普通字体类似，只是需要多定义几个文件格式，以便在各种浏览器中都能正常显示。接着设置了一些样式，比如字体大小、样式等。最后就可以像正常使用字体一样，在html中添加相应的i标签，并设置对应的classname，即可使用和显示。