雪碧图 && icon && svg

温故知新，最近在复习一些基本的东西，以前也没想写下来，突然发现，原来前端的字体图标，从最开始的雪碧图进化到font-icon在到现在的svg了

雪碧图 || 精灵图 （CSS Sprites）

有规则的将背景图片合并成为一张背景图，将多张图片合为一张整图，然后用 background-position进行定位

• 优点：

  • 利用CSS Sprites能很好地减少网页的http请求，提高页面的性能，这也是它最大的优点，也是曾经被广泛传播和应用的主要原因；
  • 能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
  • 解决了我们在图片命名上的困扰，只需对一张集合的图片上命名，不需要对每一个小元素进行命名。
  • 更换风格方便，只需要在一张或少张图片上修改图片，整个网页的风格就可以改变。维护起来更加方便

• 缺点：

  • 不能缩放，会失真
  • 不能使用css样式控制
  • 只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

font-icon

font-icon的出现解决了精灵图带来的问题，用字体文件，字符编码代替图标，通过特定的class或者伪类加入到浏览器中，Font Awesome 或者其他字体图标能提供可以直接使用CSS修改的可缩放的矢量图标，可以修改的内容包括图标的大小、颜色、阴影等这些CSS的力量能做到的一切。

• 优点

  • 矢量（无限缩放、高清）

  • CSS样式（通用、灵活）

  • 体积更小（快速）

• 缺点

  • 库太大了
  • 只能控制字符相关的属性
  • 语义性和可访问性很差，span标签代表一张图？？？
  • 文件加载失败的时候会有各种各样的bug
  • 浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同，可能会导致显示效果不同，可能这些图标会渲染成奇怪的字符

svg

SVG的出现解决了font-icon的缺陷，是直接把 SVG 写入 HTML 中，具有最强的可调性。 使用这种方法，可以使用 CSS 的fill属性和stroke属性来控制填充颜色和边线的颜色， 如果 SVG 图标包含多个部分，甚至可以设置每个部分的样式。同时，使用 JavaScript 修改 SVG 和生成动画效果都可以实现。SVG 作为 HTML 文档的一部分，不需要单独请求, 都可以定义一个函数来帮我们 include 这些 SVGSVG 作为 HTML 文档的一部分，不需要单独请求。

• 优点
  * 在任何的分辨率下被高质量地打印，图像质量不下降的情况下被放大
  * 语义化，文件是纯粹的 XML
  * 临时需要修改某个图标的形状很方便，可控性强…
  * 是开放的标准，尺寸更小，且可压缩性更强
• 缺点
  * SVG 使用上比较繁琐，需要在页面中插入一大块 SVG 代码因此不适合手写，图标复用起来也比较麻烦
  * 主流移动浏览器(Safari, Chrome, IE for Windows Phone)都已经基本兼容 SVG， 但是桌面领域中仍然要面对 IE8 以下的浏览器，此外对 SVG Defs/Symbols 的支持也还存在差异。