頁面中圖標的使用


 

  之前說要整理這塊內容,分享給大家,工作原因,直到現在,趕上清明宅在家里,趕緊整理出來與大家分享。


精靈圖(CSS sprite)
  所謂精靈圖,其實就是把幾張圖拼成一張圖。從而在低並發的瀏覽器上達到快速傳輸並呈現內容的目的(減少請求)。

  • 在用到這些圖片的時候,需要引用整張圖片然后設定坐標到需要的那張小圖上。
  • 還有就是:圖片根據顏色分組,分成多個文件。每張圖只有一種顏色,這樣讓每張圖片變得更小。
  • 當然,這根據當前項目來選擇適於你的方案。主要根據下面兩個屬性來處理精靈圖:
1 background-image: url(".../*.png");
2 background-position: 0px 0px;
3
4 /* 注意:position的負值情況。 */

 


先上幾個圖標網站,因為下面要介紹字體圖標了:


字體圖標在html中的使用

 

1 <li><a href=""><i class="i-icon">&#xfa21;</i></a></li>
2 <!-- 注意:&#xfa21; fa21為16進制 需要&#x -->

 

 1  @font-face{
2 font-family: "my-icon"
3 src: url("../*.eot");
4 /* ie低版本瀏覽器需要加'?' 否則可能回報404錯誤 */
5 src: url("../ *.eot?") format("embedded-opentype")
6 ,url("../ *.woff") format("woff")
7 ,url("../ *.ttf") format("truetype")
8 ,url("../ *.svg") format("svg");
9 font-weight: normal;
10 font-style: normal;
11 }
12 .i-icon{
13 font-family: "my-icon";
14 font-style: normal;
15 font-weight: normal;
16 font-size: 26px;
17 -webkit-font-smoothing: antialiased; /*消除鋸齒*/
18 -moz-osx-font-smoothing: grayscale; /*消除鋸齒*/
19 }

 


字體圖標在css中的使用

 

1 <li><i class="icon icon-magic"></i></li>
2 <!-- 直接引用class name -->
@font-face {
font-family
: "myfont";
src
: url("../ *.eot");
src
: url("../ *.eot?#iefix") format("embedded-opentype"),
url("../ *.woff") format("woff"),
url("../ *.ttf") format("truetype"),
url("../ *.svg") format("svg")
;
font-weight
: normal;
font-style
: normal;
}
.icon
{
font-family
: "myfont";
font-weight
: normal;
font-style
: normal;
-webkit-font-smoothing
: antialiased;
-moz-osx-font-smoothing
: grayscale;
}
.icon-magic:before
{
content
: "\c210";
}

 

 

 各種方式對比

  精靈圖 在html中 在css中
原理 使用圖片定位 @font-face @font-face
兼容  不支持低版本IE
維護成本  比較困難 簡單 簡單
顏色 豐富 色彩單一 色彩單一
縮放 失真 清晰 清晰



 

 

 

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com