往往在网站测速的时候，客户总是抱怨网页加载太慢，除了将代码压缩，去除无效代码等，我们也会做一些雪碧图，有些叫精灵图，但是这样做以后，在手机端不能很好的适配所有机型，可能会出现失真的情况，所以我们找到了一种更好的方式，将图标变为字体，这样我们可以引用任何图片，自己就可以改变他的大小与颜色。

@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团队把需要的图标都转换为各种格式才能用哦~