博客地址
针对网站中的小图标不仅有精灵图的解决方案,现在比较流行的还有字体图标。通过自定义字体字符代替图片实现一样的效果。
原理
计算机操作系统里面每个字符都有一个unicode编码,根据不同的编码浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状,通过项目引入加载去找到自定义字符,这就和使用操作系统的字体是一样的了。参考博文(字体图标生成原理)。
优势
字体图标的优势自然包含了减少图片的http请求,提高网站性能。同时相比于精灵图,字体图标本质上是字体,可以通过css设置font-size
改变图标大小同时不会造成图片失真,也可以通过color
设置字体颜色改变图标颜色,相比精灵图更加灵活。但精灵图相比字体图标有更好的色彩表现。
使用
目前网上有很多字体图标库可供我们选择,国外有icomoon,Font Awesome,国内有阿里的