data类型的URI

data类型的URI,在RFC2397中定义,允许在网页文档中嵌入小的文件,而不是通过外部链接引入。例如对于img这个Tag,哪怕这个图片非常非常的小,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Uri格式,这个文件就可以直接从页面文件内部读入了。
data类型的Uri格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Chrome这些浏览器都已经支持,但是IE直到9仍然没有支持。
同javascript:一样,data:也是一种伪协议。

完整语法

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

如果有中文,需要设置charset属性;
base64可选的,不选的话可以直接写”明文”data部分的代码;
base64是可以将图片等二进制信息编码的;
data部分是以逗号“,”分割并开始的;
一些常见的:
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

将字体嵌入至CSS中

@font-face {
  font-family:"futura-pt";
  src:url(data:font/opentype;base64,d09GR...base64code...);
  font-style:normal;
  font-weight:700;
}

在HTML中使用

<iframe src="data:text/html;base64,VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw=="></iframe>

<iframe src="data:text/html;charset=UTF-8,<b>中文</b>"></iframe>

<img src="data:image/png;base64,iVBOR...base64code..." />

base64转换工具

PHP中base64_encode函数
文本转换

谁在用这种方式?

https://typekit.com/

字体就是嵌入在css中的;

使用示例:

<script src=”http://use.typekit.net/ajf8ggy.js“></script>

<script>

try { Typekit.load(); } catch (e) {}

</script>

 

http://goo.gl/

google的网址缩短服务,导航条的背景图是嵌入在css中的;

参考资料

MDN
wikipedia
RFC2397

About 智足者富

http://chenpeng.info

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>