實現字體圖標

前言

之前在實現網頁圖標的時候咱們通常是用圖片來實現（或者是一個img標籤或者是添加backgroud-img），對於點擊圖片發生顏色或者大小變化的這種交互呢，是經過替換以及縮放圖片來實現。可是這存在的問題是對於圖標顏色不能隨意改變（由於預存的圖標的顏色老是有限的），以及對於不一樣尺寸的屏幕圖片在縮放的過程當中會產生不清晰的問題。在後來在使用bootstrap框架的時候相信你們都注意到了一種神奇的能夠隨意改變大小和顏色的圖標，這就是字體圖標。今天有機會研究了一下字體圖標的實現方式。

正文

實現原理分析

字圖圖標顧名思義就是利用了字體庫來展示圖標，即把你須要展示的圖標製做成字體庫，經過css的@font-face規則來進行引入，引入以後經過僞類的方法將圖標插入相應的使用了規定命名的元素中。

-----看懂的同窗就不要接着往下看了，若是看不懂呢那接下來我將圖文並茂地進行展現------

第一步：使用css的@font-face添加自定義字體

@font-face是css中規定的一種規則，這種規則能夠容許網頁開發者爲網頁指定在線的字體，這樣開發者就能夠擺脫對於網絡字體的依賴。

@font-face語法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <url> [ 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-family：定義了你自定義的這個字體庫的名字；

• src：添加你的字體庫文件存放的位置索引，不一樣的文件之間用逗號進行分割；

• unicode-range：The range of unicode code points defined in the font-face rule；

• font-variant：字體的異體（正常或者小型大寫字母）；

• font-feature-setting：設置字體的特性；

• font-stretch：對當前的字體進行伸縮變形（全部主流瀏覽器都不支持）；

• font-weight：設置文本的粗細，取值有normal`boldbolderlighter`；查看font-weight

• font-style：設置文本的樣式，取值有nomal`italicobliqueinherit`；查看font-style

第二步：使用僞類來爲相應class的元素添加字體圖標

在增長了自定義的字體以後就可使用了，具體代碼以下：

/* css文件 */
.class-name{
    font-family: "font-family-name"; // 這裏的font-family-name就是以前在@font-face規則中定義的
}
.class-name:before{
    content: "編碼"；//編碼是字體中定義的圖標的相應編碼
}

完成這兩步工做以後，擁有class-name的html元素就能夠展現出相應的字體圖標了。

工具

如何將設計好的圖片轉換成字體文件呢，這裏有一個神奇的網站能夠幫助咱們完成這個事情：icomoon。只須要三步：

1. 在你的工具中設計好svg格式的圖片

2. 上傳到這個網站上，選中，下載；

1. 將相應的字體文件和css代碼放入你的代碼中；

優秀的字體圖標項目

bootstrap中使用的字體圖標庫：font awesome
阿里開發的字體圖標庫：iconfont