摘要：最早走出扁平化設計的是微軟，在年推出的，就用了大量的簡單形狀，移除了復雜的樣式和紋理。但是它有個問題就是，雪碧圖比較適合固定功能的網站。而且目前我們公司網站設計全部使用，我都好久沒打開過了，對于來說，雪碧圖位置的標識也是個挺麻煩的事情。

最近公司的設計人員想要把網站上面的小圖標都改為iconfont，我也做了一篇PPT分享給大家，如果現在不記下來，可能過幾個月就忘得一干二凈了

我們知道，傳統設計的思路是擬物化，就是在電子設備中，模擬真實的世界。比如我們用的按鈕，會有一些陰影的設計，讓他看起來更像我們生活中用到的按鈕。但是隨著數字化越來越深入生活，擬物化的缺點也顯現出來。首先就是人們不需要通過擬物來跨越現實世界和數字界面的鴻溝；其次就是信息的冗余，設計越來越專注于擬物的細節，反而無法凸顯最直觀的功能；最后就是復雜的擬物設計讓人眼花繚亂，整體風格不夠簡潔。由此呢，新的設計理念應運而生，就是扁平化，他的基本理念是：去除冗余、厚重和繁雜的裝飾效果，從讓“信息”本身重新作為核心被凸顯出來。最早走出扁平化設計的是微軟，在10年推出的window phone7 ，就用了大量的簡單形狀，移除了復雜的樣式和紋理。三年以后iOS7也采用了這種設計，自此扁平化設計開始在數字化設計用大規模的使用。

想要在頁面展現一些圖標，傳統的方式使用的就是圖片，但是使用圖片存在許多的弊端，主要表現是下面三個方面

增加了頁面的請求：我們知道每張圖片都是一個請求，所以有些網站為了提高性能會使用雪碧圖，把網頁中比較小的一些小圖片整合到一張圖片文件中，再利用CSS的background-image屬性插入圖片，然后利用background-position屬性對圖片所需要的部分進行精確定位。但是它有個問題就是，雪碧圖比較適合固定功能的網站。而我們的網站每隔幾天就要加一個新的功能，添加和替換雪碧圖是個很繁瑣的工作。而且目前我們公司網站設計全部使用sktech，我都好久沒打開過ps了，對于sketch來說，雪碧圖位置的標識也是個挺麻煩的事情。

圖片的大小和顏色不容易改變：background-size是一個CSS3的屬性,ie8是不支持的，所以不能夠使用它來設置圖片的大小，有的時候為了更加清晰，設計會給我一個二倍圖，那我想讓他在IE8下面正常的尺寸展示，就只能使用img標簽，這種形式不僅加重了請求，而且對雪碧圖很不友好。其次是顏色，這些icon 有很多時候，想要hover上去有個效果，目前必須準備兩張圖片，如果想改變成多個顏色，就要準備多個圖片。

最后一個也是近些年面臨的一個問題，就是蘋果的屏幕清晰度越來越高，在高像素下面，傳統的位圖會出現馬賽克，不夠清晰，為了調高清晰度，圖片越來越大。

為了解決以上的問題，一種新的圖標顯示方法應運而生，那就是iconfont。iconfont，顧名思義，就是icon + font，即以字體的方式來顯示圖標，這個十分好理解，因為中文有時候也像一個個小圖形。iconfont可以完美解決以上的問題，并具有以下的優點

由于請求的是一整個文件字體，所以減少了http的請求

可以像字體一樣，任意變換大小和顏色；

矢量圖，不會發生放大模糊的問題

結合CSS3的text-shadow，transform這些功能可以給字體添加一些旋轉，陰影和透明度的視覺特效。

強兼容性，他的實現方式是使用CSS3的font-face, 但是這個屬性從IE4開始就支持，可以完美適配IE6及以上的瀏覽器。

iconfont一共有三種使用方式，具體參照阿里媽媽圖標庫的官方文檔

目前我們系統采用的是這種方式，這種方式的好處就是完美適配IE8，核心的思想就是這兩段代碼

@font-face {
font-family: "iconfont";
src: url("iconfont.eot?t=1511278425746"); /* IE9*/
src: url("iconfont.eot?t=1511278425746#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABLQAAsAAAAAHGQ") format("woff"),
url("iconfont.ttf?t=1511278425746") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url("iconfont.svg?t=1511278425746#iconfont") format("svg"); /* iOS 4.1- */
}

.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-text-stroke-width: 0.2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

為啥IE9的設置要單拎出來？
微軟爸爸搞事情，在IE9的兼容模式下，是不支持后面那種書寫方式的，所以單拎出來，直接適配IE9

為啥IE6-IE8的URL上有個#IEfix？
微軟最初支持font-face這個功能的時候，font-face并沒有收錄到標準中，低版本的IE會把url里面第一個引號到最后一個引號都當成URL，解析出來一定是404，所以加了一個IEfix，表示后面的是錨點的內容，幫助瀏覽器正確解析，這個錨點叫什么并不重要。

formate 是什么意思？
不同瀏覽器解析的字體格式不一樣，formate就是告訴各種版本的瀏覽器，你支持這樣的字體嗎，支持的話就找這個URL

-webkit-font-smoothing: antialiased; 這是啥意思
這個是因為，字體在放大的時候，其邊緣會出現鋸齒狀的樣式，顯示出來顆粒感很重，不夠美觀。而這個屬性，叫做抗鋸齒特性，功能就是把這些突出的小毛茬都切掉。而且要注意，這個屬性只在Mac電腦上是有效的，因為蘋果認為應該顯示設計最原本的樣式，這樣屏幕上展示的內容和打印機打印出來的內容一樣，但是微軟認為展示的樣式符合大眾認識的美觀更加重要，所以Windows7以上會自動開啟ClearType的抗鋸齒方法。

那-webkit-text-stroke-width: 0.2px;又是有啥用
用抗鋸齒技術把小毛茬切掉以后，icon相當于比預想的要細了，使用這個功能，給圖標描個0.2px的邊，完美符合預期

沒啥好說的和Unicode差不多，只不過用:after偽元素使用，我試了一下，IE8是支持偽元素的。但是不支持大小的修改，所以這種方式只能兼容IE9及以上的方式

傳說是未來發展的趨勢，可以展示多種顏色的圖標。核心的代碼是下面這段

.icon {
/* 通過設置 font-size 來改變圖標大小 */
width: 1em; height: 1em;
/* 圖標和文字相鄰時，垂直對齊 */
vertical-align: -0.15em;
/* 通過設置 color 來改變 SVG 的顏色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下會顯示
normalize.css 中也包含這行 */
overflow: hidden;
}

vertical-align: -0.15em; 這么設置是為啥
因為SVG雖然可以使用font的方式對icon進行大小和顏色的變換，但是本質上不是font，而更像一張圖片。這導致如果icon后面跟著文字的話，文字會按照baseline對齊icon的底端，為了讓SVG表現的和font一樣，就把后面的文字對齊icon的baseline位置，因為一般baseline距離bottom的距離是0.15，所以這個數值設置成了0.15em。至于為什么要采用這種看上去意義不明的計算方式而不是直接使用bottom屬性，那是因為bottom這個屬性在低版本瀏覽器（尤其是IE8）上產生的bug比較多，而數字計算的方式更加穩定。

9月的時候iconfont團隊做過一次改版，他們應廣大技術人員的要求，將woff文件默認轉換成了base64的格式，因為base64將文件直接編碼所以可以減少一次http請求。原則上IE8 是支持base64的，但是IE8對base64的解碼有限制，如果進行64位編碼后大于32K，則超過32K的部分不能被解碼，我做過實驗，就是使用只有兩個圖標生成的base64，十分短，放在IE8下面是好用的，但是實際項目的文件圖標很多，就沒辦法正常的顯示了。于是我到阿里的網站跟他們說明了情況，希望他們能夠加一個關閉base64的功能，但是阿里的人員跟我說，天貓已經全線放棄IE8了，希望我們也放棄IE8.所以目前只能手動的將base64轉為文件的地址，而且后續估計也要一直如此

iconfont改完的頁面肉眼可見的美觀了不少，書寫也十分的方便，目前主流的網站大部分都已經使用iconfont了，相信不久的將來他會遍布互聯網的每個角落