css字型表徵圖的使用方法

標籤：ack   images   att   切割   orm   自己   相容性   c11   背景   

提要：對於傳統的一般用css雪碧（css sprite）來搞，目前大部分網站已經主要字型表徵圖 ，利用font+css 或者font+html 來開發，今天總結了一下，記錄之~css sprite用背景圖片定位，相容性好，表徵圖顏色豐富，但是對於網站縮放來講，會使圖片失真，也不容易維護；而當我們運用字型表徵圖來做這個事的時候，好處就多多了（但是字型表徵圖就是顏色單一，一般可忽略）1.首先從https://icomoon.io/ 國外的字型表徵圖庫 非常好 下載免費的表徵圖庫（也可以自己添加要求添加SVG格式的表徵圖 ），但是如何把表徵圖便成為web字型呢，請看下面的連結http://www.flowerboys.cn/font/tutorial.html 將表徵圖變為字型2.從https://icomoon.io/app/#/select免費的字型表徵圖庫中，選擇所需要的字型表徵圖庫，然後下載下來 將font引入到自己的css目錄中font+html :html:

<ul class="layout"><li><a href=""><i style="color: #efe0ce;" class="imooc-icon">?</i></a></li><li><a href=""><i style="color: #ef7073;" class="imooc-icon">?</i></a></li><li><a href=""><i style="color: #78ade3;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #eae77f;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #3c3c3c;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:30px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:60px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:90px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:120px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:148px;" class="imooc-icon"></i></a></li></ul>開啟已經下載font字型表徵圖demo.html 裡邊有相關的表徵圖代碼f048 ,但是瀏覽器需要添加&#x才可以識別

　　

css:(只粘貼使用的css代碼) 

@font-face{font-family: "imooc-icon";src: url("../fonts/icomoon.eot"); /* IE9 相容模式 */src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")/* IE6-IE8 */,url("../fonts/icomoon.woff") format("woff")/* chrome, firefox */,url("../fonts/icomoon.ttf") format("truetype")/* chrome, firefox, opera, Safari,Android, iOS 4.2+*/,url("../fonts/icomoon.svg") format("svg");/* iOS 4.1- */font-weight: normal;font-style: normal;}.imooc-icon{font-family: "imooc-icon";font-style: normal;font-weight: normal;font-size: 64px;-webkit-font-smoothing: antialiased;/* 防webkit核心瀏覽器鋸齒*/-moz-osx-font-smoothing: grayscale;/*防mac瀏覽器鋸齒*/}其中 #iefix 解決ie6中無法顯示的問題

 

font+css:html:

<ul class="layout">    <li><i class="icon icon-heart"></i></li>　　<li><i class="icon icon-heart"></i></li>　　<li><i class="icon icon-heart"></i></li>　　<li><i class="icon icon-heart"></i></li></ul>

css:

@font-face{    font-family: "imooc";    src: url("../fonts/imooc.eot");/* IE9相容 */    src: url("../fonts/imooc.eot?#iefix") format("embedded-opentype"),    url("../fonts/imooc.woff") format("woff"),    url("../fonts/imooc.ttf") format("truetype"),    url("../fonts/imooc.svg") format("svg");    font-weight: normal;    font-style: normal;}.icon{    font-family: "imooc";    font-weight: normal;    font-style: normal;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}.icon-heart:before { /*對於before 虛擬元素 請自行百度*/    content: "\e600";}

　　

其次，css sprite : 按照所需要的盒子width height 用ps 均勻切割 圖片 以圖片為背景 製作icon小表徵圖 html代碼：

<ul class="sprite">　　<li>　　　　<s style="background-position: 0 0;" class="s-icon"></s>　　　　<a href="">adsf</a>　　</li>　　<li>　　　　<s style="background-position: 0 -40px;" class="s-icon"></s>　　　　<a href="">adsfwfewe</a>　　</li>　　<li>　　　　<s style="background-position: 0 -80px;" class="s-icon"></s>　　　　<a href="">123123213213/a>　　</li></ul>　

對應css： 

.sprite{　　margin: 10px auto;　　width: 206px;　　border: 1px solid #b51600;}.sprite li{　　cursor: pointer;　　height: 42px;　　width: 206px; 　　border-bottom: 1px solid #911001;　　border-top: 1px solid #c11e08;}.sprite li a {　　color: #fff;　　line-height: 42px;　　font-size: 14px;}.sprite li s{　　height: 40px;　　width: 24px;　　display: block;　　margin-left: 10px;　　margin-right: 8px;　　float: left;　　background-image: url("../images/s-icon.png");}

　　

 

css字型表徵圖的使用方法