Icon font

icon font 指的是用字型檔案取代圖片檔案，來展示圖示、特殊字型等元素的方法。

應用場景：

iconfont的優缺點

• 大小可以自由地變化
• 顏色可以自由地修改
• 新增陰影效果
• *IE6也可以支援
• 支援一些CSS3對文字的效果
• 字型檔案比圖片檔案小很多
• 由於是字型，所以只可以顯示純色圖片，不支援多種顏色的圖片（缺點）

資源：

阿里icon font字型檔
這個是阿里媽媽M2UX的一個icon font字型圖示字型檔，包含了淘寶圖示庫和阿里媽媽圖示庫。

fontello
線上定製你自己的icon font字型圖示字型檔，也可以直接從GitHub下載整個圖示集，該專案也是開源的。

icomoon
可以線上匯入的SVG格式字型，並進行編輯，然後下載來使用。

使用：

假如現在我們想使用阿里icon font字型檔 中的12星座圖示：

步驟1: 選中12星座圖示，下載到本地或者儲存為線上專案

步驟2: 將以下選中的檔案拷貝到專案檔案目錄下

步驟3: 在CSS檔案中使用font-face宣告字型，定義使用iconfont的樣式

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix'
 
) format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-shuipingzuo:before { content: "\3437"; }
.icon-shuangyuzuo:before { content: "\3438"; }
.icon-mojiezuo:before { content: "\3439"; }
.icon-chunvzuo:before { content: "\343a"; }
.icon-shizizuo:before { content: "\343b"; }
.icon-juxiezuo:before { content: "\343c"; }
.icon-tianhezuo:before { content: "\343d"; }
.icon-sheshouzuo:before { content: "\343e"; }
.icon-tianchengzuo:before { content: "\343f"; }
.icon-shuangzizuo:before { content: "\3440"; }
.icon-jinniuzuo:before { content: "\3441"; }
.icon-muyangzuo:before { content: "\3442"; }

步驟4: 挑選相應圖示並獲取字型編碼，應用於頁面

<i class="icon iconfont">&#x343d;</i>

擴充套件：

關於@font-face這個屬性，mozilla 的語法如下:

@font-face {    
    [font-family: <family-name>;]?    
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?    
    [unicode-range: <urange>#;]?    
    [font-variant: <font-variant>;]?    
    [font-feature-settings: normal|<feature-tag-value>#;]?    
    [font-stretch: <font-stretch>;]?    
    [font-weight: <weight>];    
    [font-style: <style>];
}

@font-face可以讓我們自定義網頁顯示字型，引入字型資原始檔，當用戶電腦裡沒有安裝這種字型時，依然可以正常顯示。

1. font-family，指定一個字型型別作為預設字型型別，比如font-family:宋體預設字型就會是宋體.

2. src，這裡有3個值，分別是url引入字型路徑資源，本地路徑或者網路路徑都可以；font-face-name：自定義字型名稱；formart：字型格式，因為瀏覽器的N國爭鋒，所以導致市面上有很多的字型格式，目前主要有ttf、woft、eot、svg、svgz這幾種格式型別，對應的瀏覽器支援如下：

   瀏覽器	支援型別
   IE6,7,8	僅支援 Embedded OpenType(.eot) 格式。
   IE9	除eot外，開始支援woff格式。重點內容
   Firefox 3.5	支援 TrueType、OpenType(.ttf, .otf) 格式。
   Firefox 3.6	支援 TrueType、OpenType(.ttf, .otf) 及 woff 格式。
   Chrome,Safari,Opera	支援 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

3. unicode-range，字型編碼的範圍，比如8位，16位等。

4. font-variant，字型變形值

5. font-stretch，字型拉伸值

6. font-weight，字型粗線值

7. font-style，字型屬性值

over
想進一步瞭解字型圖示製作的朋友請移步 字型圖示製作詳解