字型圖示 icon font

Icon font

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

應用場景：

iconfont的優缺點

• 大小能夠自由地變化
• 顔色能夠自由地改動
• 加入陰影效果
• *IE6也能夠支援
• 支援一些CSS3對文字的效果
• 字型檔案比圖檔檔案小非常多
• 由于是字型，是以僅僅能夠顯示純色圖檔，不支援多種顔色的圖檔（缺點）

資源：

​​阿裡icon font字庫​​

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

​​fontello​​

線上定制你自己的icon font字型圖示字庫，也能夠直接從GitHub下載下傳整個圖示集，該項目也是開源的。

​​icomoon​​

能夠線上導入的SVG格式字型，并進行編輯。然後下載下傳來使用。

​​Font-Awesome​​

​​去哪兒圖示庫​​

使用：

假如如今我們想使用​​阿裡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) 格式。

1. unicode-range，字型編碼的範圍，比方8位，16位等。
2. font-variant。字型變形值
3. font-stretch。字型拉伸值
4. font-weight，字型粗線值
5. font-style，字型屬性值

​