iconfont 介紹

最近公司的設計人員想要把網站上面的小圖標都改成iconfont，我也作了一篇PPT分享給你們，若是如今不記下來，可能過幾個月就忘得一乾二淨了

一· 現代設計的趨勢

咱們知道，傳統設計的思路是擬物化，就是在電子設備中，模擬真實的世界。好比咱們用的按鈕，會有一些陰影的設計，讓他看起來更像咱們生活中用到的按鈕。可是隨着數字化愈來愈深刻生活，擬物化的缺點也顯現出來。首先就是人們不須要經過擬物來跨越現實世界和數字界面的鴻溝；其次就是信息的冗餘，設計愈來愈專一於擬物的細節，反而沒法凸顯最直觀的功能；最後就是複雜的擬物設計讓人眼花繚亂，總體風格不夠簡潔。由此呢，新的設計理念應運而生，就是扁平化，他的基本理念是：去除冗餘、厚重和繁雜的裝飾效果，從讓「信息」自己從新做爲核心被凸顯出來。最先走出扁平化設計的是微軟，在10年推出的window phone7 ，就用了大量的簡單形狀，移除了複雜的樣式和紋理。三年之後iOS7也採用了這種設計，自此扁平化設計開始在數字化設計用大規模的使用。

二· 傳統的圖片所存在的缺陷

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

1. 增長了頁面的請求：咱們知道每張圖片都是一個請求，因此有些網站爲了提升性能會使用雪碧圖，把網頁中比較小的一些小圖片整合到一張圖片文件中，再利用CSS的background-image屬性插入圖片，而後利用background-position屬性對圖片所須要的部分進行精肯定位。可是它有個問題就是，雪碧圖比較適合固定功能的網站。而咱們的網站每隔幾天就要加一個新的功能，添加和替換雪碧圖是個很繁瑣的工做。並且目前咱們公司網站設計所有使用sktech，我都很久沒打開過ps了，對於sketch來講，雪碧圖位置的標識也是個挺麻煩的事情。
2. 圖片的大小和顏色不容易改變：background-size是一個CSS3的屬性,ie8是不支持的，因此不可以使用它來設置圖片的大小，有的時候爲了更加清晰，設計會給我一個二倍圖，那我想讓他在IE8下面正常的尺寸展現，就只能使用img標籤，這種形式不只加劇了請求，並且對雪碧圖很不友好。其次是顏色，這些icon 有不少時候，想要hover上去有個效果，目前必須準備兩張圖片，若是想改變成多個顏色，就要準備多個圖片。
3. 最後一個也是近些年面臨的一個問題，就是蘋果的屏幕清晰度愈來愈高，在高像素下面，傳統的位圖會出現馬賽克，不夠清晰，爲了調高清晰度，圖片愈來愈大。

三· 什麼是iconfont

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

1. 因爲請求的是一整個文件字體，因此減小了http的請求
2. 能夠像字體同樣，任意變換大小和顏色；
3. 矢量圖，不會發生放大模糊的問題
4. 結合CSS3的text-shadow，transform這些功能能夠給字體添加一些旋轉，陰影和透明度的視覺特效。
5. 強兼容性，他的實現方式是使用CSS3的font-face, 可是這個屬性從IE4開始就支持，能夠完美適配IE6及以上的瀏覽器。

四· iconfont的使用方法

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

1.Unicode 方式

目前咱們系統採用的是這種方式，這種方式的好處就是完美適配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;
}

1. 爲啥IE9的設置要單拎出來？
   微軟爸爸搞事情，在IE9的兼容模式下，是不支持後面那種書寫方式的，因此單拎出來，直接適配IE9
2. 爲啥IE6-IE8的URL上有個#IEfix？
   微軟最初支持font-face這個功能的時候，font-face並無收錄到標準中，低版本的IE會把url裏面第一個引號到最後一個引號都當成URL，解析出來必定是404，因此加了一個IEfix，表示後面的是錨點的內容，幫助瀏覽器正確解析，這個錨點叫什麼並不重要。
3. formate 是什麼意思？
   不一樣瀏覽器解析的字體格式不同，formate就是告訴各類版本的瀏覽器，你支持這樣的字體嗎，支持的話就找這個URL
4. -webkit-font-smoothing: antialiased; 這是啥意思
   這個是由於，字體在放大的時候，其邊緣會出現鋸齒狀的樣式，顯示出來顆粒感很重，不夠美觀。而這個屬性，叫作抗鋸齒特性，功能就是把這些突出的小毛茬都切掉。並且要注意，這個屬性只在Mac電腦上是有效的，由於蘋果認爲應該顯示設計最本來的樣式，這樣屏幕上展現的內容和打印機打印出來的內容同樣，可是微軟認爲展現的樣式符合大衆認識的美觀更加劇要，因此Windows7以上會自動開啓ClearType的抗鋸齒方法。
5. 那-webkit-text-stroke-width: 0.2px;又是有啥用
   用抗鋸齒技術把小毛茬切掉之後，icon至關於比預想的要細了，使用這個功能，給圖標描個0.2px的邊，完美符合預期

2.fontclass 方式

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

3.symbol 方式

傳說是將來發展的趨勢，能夠展現多種顏色的圖標。核心的代碼是下面這段

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

1. 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了，相信不久的未來他會遍及互聯網的每一個角落