字符集图标的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字符集图标的使用相关的知识，希望对你有一定的参考价值。
为了减轻服务器的负担和对带宽的消耗，要尽量避免对图片的使用，就有了字符集。
字符集就是通过编码来表示文字和图片的，这里我们主要看如何使用字符集代替图片。
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>
这样我们就能用上自己喜欢的字体啦!
以上是关于字符集图标的使用的主要内容，如果未能解决你的问题，请参考以下文章
带有操作栏图标单击的 NavigationUI 导致片段淡入淡出