本文介绍的是边角料技术base64数据和@font-face,因为它们用的比较少。

base64：

先看看这样的样式

div {
width:100px;
height:100px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEX/AAAAAP9sof2OAAAAIUlEQVR4nGNgGAWjgFTw//8HJF4Dg8CI5aGGxCgYBcQBAMULD/2Zt2wmAAAAAElFTkSuQmCC);
}

另外还可以这样写:

<img src="data:image/png;base64, 
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/ 
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U 
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC"/>

其中

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEX/AAAAAP9sof2OAAAAIUlEQVR4nGNgGAWjgFTw//8HJF4Dg8CI5aGGxCgYBcQBAMULD/2Zt2wmAAAAAElFTkSuQmCC

定义了一张背景图片，而这张图片使用base64编码格式直接嵌入到样式表里面了。

其优点：

1:放在css里面很容易做到缓存效果，大部分应用都是基于这个考虑。

2:css可使用gzip压缩。

3:减少请求次数。

但是缺点如下：

1：ie8以上才支持base64编码。要ie7以下支持，也不是没办法，看这篇文章。

2:这样的方式不好重用。

3：放在css里面的话会造成大数据量，css没下载完之前，其他样式也没显示出来。

4:很麻烦。

附base64编码工具

• http://www.motobit.com/util/base64-decoder-encoder.asp
• http://www.greywyvern.com/code/php/binary2base64

@font-face

@font-face {
	font-family: Delicious;
	src: url('Delicious-Roman.otf');
}

FF3.5以上以及其他浏览器都支持这种写法，但是在格式上有区别

ie支持.eot (Embedded OpenType) 和.ote

其他支持TrueType 和OpenType (.ttf, .otf)

也可以配合base64格式

@font-face{
font-family: Gentium;
src: url("data:font/
truetype;base64,…");
}