2014-7-29: CSS Sprite | Image Data URL | Icon Font | 使用border制作三角形

[hjzheng]

1. CSS Sprite 这次为什么要说CSS精灵，并不是说大家不知道什么是CSS Sprite或如何使用CSS Sprite，而是在与美工或UX合作进行图片合并的时候，由于他们不知道我们的HTML结构，每次合成的图片无法满足我们的要求，导致效率低下，所以我们决定自己解决, 使用在线合成工具: spritepad

   注意:

   • 当图片大于或等于容器元素，直接紧凑的合成在一起。
   • 当图片小于容器元素:
     • 如果background-position左右横向放置，合成时，保证图片左右两边没有元素
     • 如果background-position上下垂直放置，合成时，保证图片上下两边没有元素。

2. image data url 这是一种只会在极端情况下，使用的技术，这种极端情况如下：

   • 项目临时增加一个图片，想快速部署
   • 图片大小非常小，且无需重用

   可以考虑该方法，减少图片，但是会增加CSS文件大小。

   如何使用

     .class {
         background: url(data:image/gif;base64,R0lGODl ... ) no-repeat left center;
     }

   注意 在线将图片转换成data工具: encodeData

3. icon font 希望我们designer可以考虑使用icon font

   • 优点: 矢量图,可以像字体一样，修改颜色和大小，不用考虑background-position，且performance优于图片
   • 缺点: 只支持纯色

   关于更多icon font知识

4. 使用border制作三角形

   • 优点: 减少图片，
   • 缺点: 多写一个html元素

   关于使用border制作三角形

[hjzheng]

icon font扩展阅读: fontforge制作自定义字体及在手机上应用举例 如何灵活利用免费开源图标字体-IcoMoon篇 justfont就是字,中文字型web font服務