tutorial light url before fix mooc format css字體 ade

提要：對於傳統的一般用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字體圖標的使用方法