首页 > 代码库 > 字符集图标的使用

字符集图标的使用

2024-09-16 18:26:07   218人阅读

　　为了减轻服务器的负担和对带宽的消耗，要尽量避免对图片的使用，就有了字符集。

　　字符集就是通过编码来表示文字和图片的，这里我们主要看如何使用字符集代替图片。

　　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>

 这样我们就能用上自己喜欢的字体啦!

　　

　　

字符集图标的使用


联系
我们