在作PC端/手机端Web项目中，咱们会常常遇到图标以何种形式在服务器上存在并在前端显示的问题。好比以前比较流行使用SVG显示icon。前端
另外，如今移动端web app愈来愈流行，可是图标在手机上显示会比较模糊，如今有不少小的Icon，如分享、回复、赞、返回、话题、访问、箭头等，这些Icon通常都是纯色的。web
开始制做时能够考虑使用双倍大小的Sprite图（雪碧图），经过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想；浏览器
后来又考虑多套图标适配方案、SVG矢量图等，都由于种种缘由不理想（如多套图标繁琐、Android 2.3不支持SVG格式等）性能优化
如今，介绍当下首选的以及最流行的方法：图标（icon）字体化服务器
首先，我在一个web项目中，有这样一个目录文件：static/fonts/icomoon.eot、static/fonts/icomoon.svg、static/fonts/icomoon.ttf、static/fonts/icomoon.woffapp
上面四个文件就是图标字体化移动端web
eot：IE浏览器所需图标格式svg
svg：更高版本浏览器所需图标格式性能
ttf：Firefox浏览器所需图标格式测试
woff：IE浏览器所需图标格式
优缺点：
1. 图标清晰
2. 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会立刻渲染出来，不须要下载一个图像。能够减小HTTP请求，还能够配合HTML5离线存储作性能优化
3. 灵活性：图标字体能够用过font-size属性设置其任何大小，还能够加各类文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。能够在任何背景下显示。使用位图的话，必须得为每一个不一样大小和不一样效果的图像输出一个不一样文件
4.兼容性：网页字体支持全部现代浏览器，包括IE低版本。详细兼容性能够点击这里
除了以上优点以外，固然也有劣势一、图标字体只能被渲染成单色或者CSS3的渐变色，因为此限制使得它不能普遍使用。二、使用版权上有限制，有好多字体是收费的。固然也有不少免费开源的精美字体图标供下载使用。三、创做自已的字体图标很费时间，重构人员后期维护的成本偏高。