base64数据和@font-face

本文介绍的是边角料技术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编码工具

 

@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,…");
}

Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1