關於網頁圖標使用與字體圖標制作

本文轉載自查看原文 2016-03-27 16:44 1331 網頁圖標圖標字體 css sprites svg fontface image-se

一、網頁圖標使用探討

在網頁上大量使用圖片，會導致網頁卡頓等現象，為減少http的請求次數，提升網頁性能，減少時間和帶寬以及提升前端工作效率，我們對相關網頁圖標的實現方法進行了研究。

(1)iconfont字體圖標

iconfont實質上是將圖標轉成字體格式，通過添加CSS樣式來控制圖標的顏色大小以及各類樣式效果。它的優點是輕量級（文件大小較小）、靈活性（可以通過CSS來控制文字樣式）、兼容性（各類瀏覽器兼容）。缺點是更改不方便，制作成本高，字體小於16時，容易出現鋸齒。

 1 /*字體圖標：將圖標轉換為字體，在css插入@font-face及相關代碼引用該字體，即可獲得相關圖標*/
 2 @font-face {
 3     font-family: 'yizitfont';
 4     src:    url('fonts/yizitfont.eot?occy8k');
 5     src:    url('fonts/yizitfont.eot?occy8k#iefix') format('embedded-opentype'),
 6         url('fonts/yizitfont.ttf?occy8k') format('truetype'),
 7         url('fonts/yizitfont.woff?occy8k') format('woff'),
 8         url('fonts/yizitfont.svg?occy8k#yizitfont') format('svg');
 9     font-weight: normal;
10     font-style: normal;
11 }
12 [class^="yizit"], [class*=" yizit"] {
13     /* use !important to prevent issues with browser extensions that change fonts */
14     font-family: 'yizitfont' !important;
15     speak: none;
16     font-style: normal;
17     font-weight: normal;
18     font-variant: normal;
19     text-transform: none;
20     line-height: 1;
21     font-size:12px;
22 
23     /* Better Font Rendering =========== */
24     -webkit-font-smoothing: antialiased;
25     -moz-osx-font-smoothing: grayscale;
26 }
27 .yizitshare2:before {
28     content: "\e903";
29 }
30 .yizitmail:before {
31     content: "\e904";
32 }

(2)CSS Sprites

CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許我們將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，“background-image”，“background- repeat”，“background-position”的組合進行背景定位。能很好地減少了網頁的http請求次數，從而大大的提高了頁面的性能,節省時間和帶寬。缺點是圖標具體位置定位困難，圖標修改成本較高(不方便統一修改圖標顏色與大小)，寬屏適應問題。

CSS Sprites 在線工具：http://spritegen.website-performance.org/

 1 /*CSS sprites：將所有圖標集中在一張圖片上，然后通過css定位引用相關圖片*/
 2 .icon {
 3     display: inline-block;
 4     background-repeat: no-repeat;
 5     background-image: url(sprite.svg);
 6 }
 7 .icon-share2 {
 8     width: 16px;
 9     height: 16px;
10     background-position: 0 0;
11 }
12 .icon-mail {
13     width: 16px;
14     height: 16px;
15     background-position: 0 -26px;
16 }

(3)SVG Defs/Symbols

這種其實就是在SVG Sprites上面更進一步的使用了，SVG Sprites是需要我們去通過坐標獲取對應位置圖標的，但是SVG Defs/Symbols就更簡單了，直接通過給每個SVG ICON定義ID，直接調用對應ID即可。缺點是IE對SVG的兼容性不好，對於不熟悉svg的童鞋修改成本較高。

<!--svg 部分-->
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-share2" viewBox="0 0 1024 1024">
<title>share2</title>
<path class="path1" d="M864 704c-45.16 0-85.92 18.738-115.012 48.83l-431.004-215.502c1.314-8.252 2.016-16.706 2.016-25.328s-0.702-17.076-2.016-25.326l431.004-215.502c29.092 30.090 69.852 48.828 115.012 48.828 88.366 0 160-71.634 160-160s-71.634-160-160-160-160 71.634-160 160c0 8.622 0.704 17.076 2.016 25.326l-431.004 215.504c-29.092-30.090-69.852-48.83-115.012-48.83-88.366 0-160 71.636-160 160 0 88.368 71.634 160 160 160 45.16 0 85.92-18.738 115.012-48.828l431.004 215.502c-1.312 8.25-2.016 16.704-2.016 25.326 0 88.368 71.634 160 160 160s160-71.632 160-160c0-88.364-71.634-160-160-160z"></path>
</symbol>

 1 <!--html 部分-->
 2    <div class="pb">
 3         <div class="pb1">
 4             <span class="icon icon-share2"></span>
 5             <p>Share</P>
 6         </div>
 7         <div class="pb1">
 8             <span class="icon icon-mail"></span>
 9             <p>Mail</P>
10         </div>
11     </div>

(4)Svg Sprites +Png Sprites + Image-set（由騰訊前端提出）

Webkit內核"safari6"和“chrome21”支持CSS4的background-image新規范草image-set，支持Web前端人員解決不同分辨率下圖片的顯示，特別的（Retina屏幕），使不同設備顯示不同的圖片，避免了IE對SVG兼容性的問題。缺點是支持image-set的瀏覽器不多，修改圖標成本高(不方便統一修改圖標顏色與大小)，圖標定位困難。

/*在css sprites的基礎上優化*/
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(svgpngsprites.png);
    background-image:-webkit-image-set(url(svgpngsprites.png) 1x,url(svgpngsprites.svg) 2x);        
    }
.icon-share2 {
    width: 16px;
    height: 16px;
    background-position: 0 0;
}
.icon-mail {
    width: 16px;
    height: 16px;
    background-position: 0 -26px;
}

l 不支持image-set：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
l 支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
l Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。

(5)幾種網頁圖標的比較

	iconfont	CSS Sprites	SVG Symbols	Image-set
大小	18.5k	9.96k	8.29k	11.9k
兼容性	強	ie8	ie8	強
適應性	強	差（寬屏定位）	強	差（寬屏定位）
清晰度	16px↓差	Svg較好	較好	較好
靈活性	強	差	差	差
使用成本	低	定位問題	低	定位問題
維護成本	低	中	高	中