为了减轻服务器的负担和对带宽的消耗,要尽量避免对图片的使用,就有了字符集。
字符集就是通过编码来表示文字和图片的,这里我们主要看如何使用字符集代替图片。
1.定义字符集
@font-face{ /*字符集图标名字*/ font-family: iconfont; /*字符集图标地址,引入这么多是为了兼容不同浏览器*/ src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot); src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"), url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"), url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.ttf) format("truetype"), url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg"); }
2.使用字符集,给个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
@font-face{
font-family: iconfont;
/*字符集图标*/
src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),
url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),
url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.ttf) format("truetype"),
url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg");
}
i{
font-family: iconfont;
font-size: 12px;
font-style: normal;
color: #000;
}
</style>
</head>
<body>
<i>ő</i>
</body>
</html>
1个简洁的小图标就完成了
By the way,可以顺便说说自定义字体。这是css3特有的,要求至少IE9的浏览器。
废话不多说,给个例子
<style>
@font-face
{
font-family: myfont;
src: url('www.w3school.com.cn/example/css3/Sansation_Light.ttf'),
url('http://www.w3school.com.cn/example/css3/Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myfont;
}
</style>
这样我们就能用上自己喜欢的字体啦!