图片图标放大会失真，而且占据服务器内存，每加载一张图片都要进行一次http请求，拖慢了整个网页的加载速度，使用字体图标易于缩放，易于改变图标的颜色、透明及阴影效果，浏览器和css都能很好的支持，最重要的是跟图片显示相同的内容体积会更小。
例：
@font-face { font-family: 'iconfont'; /* project id 190481 */ src: url('//at.alicdn.com/t/font_8mq55r4bjwz5mi.eot'); src: url('//at.alicdn.com/t/font_8mq55r4bjwz5mi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_8mq55r4bjwz5mi.woff') format('woff'), url('//at.alicdn.com/t/font_8mq55r4bjwz5mi.ttf') format('truetype'), url('//at.alicdn.com/t/font_8mq55r4bjwz5mi.svg#iconfont') format('svg'); } .iconfont1{font-family:"iconfont"; color:red; font-size:22px; -webkit-font-smoothing:antialiased; -webkit-text-stroke-with:0.2px; -moz-osx-font-smoothing:grayscale; } <div><span class="iconfont1"></span></div> <div><span class="iconfont1"></span></div> <div><span class="iconfont1"></span></div>
