方法一:CSS+Sprite
在国内被称为“CSS雪碧”,也叫“CSS精灵”。它是把网页中一些零星背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置,因此也叫“图片拼合”技术。
好处:减少文件体积和服务器请求次数,从而提高效率。
详细的见:http://blog.csdn.net/u013511989/article/details/47172241
方法二:font+HTML
1.灵活性:轻松的改变图标的颜色或其他CSS效果2.可扩展:改变图标的大小,就像改变字体大小一样容易
3.矢量性:图标是矢量的,与像素无关,缩放图标不会影响清晰度
4.兼容性:字体图标支持所有现代浏览器(包括IE6)
5.本地使用:通过添加定制字体到本地系统,可以在各种不同的设计和编辑应用程序中使用它们。
IcoMoon icomoon.io 自己制作flowerboys.cn
1.免费图标,免费应用程序2.构建只包含您需要的图标
3.导入矢量图字体(SVG),而不会被上传到服务器
4.方便管理图标,除了生成字体,还可以声称SVG。
结果:
EOT 微软开发的用于嵌入网页的字体,IE专用字体WOFF Web自体重最佳格式,他是一个开放的True Type/OpenType的压缩版本,被W3C推荐
TTF 1980有微软和苹果联合开发的一套字体标准,是Mac OS和WIN操作系统中最常见的一种字体
SVG 用于SVG字体渲染的一种格式,它是由W3C制定的开放标准的图形格式。
浏览器支持情况
自定义字体@font-face{font-family: src: 四个全引入url() format(),...}
format().eot("embedded-opentype").woff("woff").ttf("truetype").svg.svgz("svg")引用字体,class的font-family,抗锯齿属性-webkit-font-smoothing:antialiased;-moz-osx-smoothing:grayscale,标签建@#*16进制
IE6-IE8错误解决办法:src url 中 eot后加?或者?#iefix
IE9兼容:src url中eot后不加任何东西。
方法三:font+CSS
before+content结合使用eg:.icon-music:before{content:'\e605'}
批量生成css:before content样式直接生成
CSS Selector :use a Class; use i(for selecting i);
三种方法对比: