码迷,mamicode.com
首页 > 其他好文 > 详细

字符集图标的使用

时间:2017-04-23 17:55:38      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:服务器   color   san   sch   ace   mat   如何使用   ges   技术   

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

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

  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>

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

  

  

字符集图标的使用

标签:服务器   color   san   sch   ace   mat   如何使用   ges   技术   

原文地址:http://www.cnblogs.com/yuehenying/p/6753083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!