往往在网站测速的时候，客户总是抱怨网页加载太慢，除了将代码压缩，去除无效代码等，我们也会做一些雪碧图，有些叫精灵图，但是这样做以后，在手机端不能很好的适配所有机型，可能会出现失真的情况，所以我们找到了一种更好的方式，将图标变为字体，这样我们可以引用任何图片，自己就可以改变他的大小与颜色。
@font-face{
font-family:'ODY H5 Font';
src:url('../fonts/saas-h5-font.eot');
src:url('../fonts/saas-h5-font.eot?#iefix')format('embedded-opentype'),
url('../fonts/saas-h5-font.woff')format('woff'),
url('../fonts/saas-h5-font.ttf')format('truetype'),
url('../fonts/saas-h5-font.svg')format('svg');
}
要把所有的格式都引用，避免有些浏览器不兼容
定义全局样式
.oi{
position:relative;
top:1px;
display:inline-block;
font-family:'ODY H5 Font';
font-style:normal;
font-weight:normal;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:#808080;
}
定义字体名称
.oi-bowl:before{
content:"\F000";
}
.oi-planet:before{
content:"\F001";
}
.oi-fruit:before{
content:"\F002";
}
页面上引用：
页面上效果：
小伙伴们 做自体库是不是很简单呢，解决了图标失真的问题，不过这个需要UI团队把需要的图标都转换为各种格式才能用哦~
