字體圖標(biāo)的使用

shuibo 發(fā)布于2019-04-23 11:54 / 2102人閱讀

摘要：字體圖標(biāo)的不足既然字體圖標(biāo)那么有效率，那么為什么不都使用字體圖標(biāo)呢現(xiàn)在的限制主要是字體圖標(biāo)的開發(fā)要求比較高，畢竟是開發(fā)一種字體。自己開發(fā)字體圖標(biāo)很累，幸好有很多樂于分享的，現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來。

字體圖標(biāo)的介紹
iconfont的使用
- 基于unicode的用法：
- 補(bǔ)充

首發(fā)日期：2019-01-13

字體圖標(biāo)的介紹

-- 什么是字體圖標(biāo)?
在計算機(jī)上，文字本質(zhì)上都是一些像素點，而圖標(biāo)也是一些像素點，那么有沒有辦法把某個字體的字做成圖標(biāo)的樣子呢？于是有了字體圖標(biāo)這種東西。字體圖標(biāo)本質(zhì)上是一種字體，不過它在表現(xiàn)意義上是一個圖標(biāo)。

-- 為什么使用字體圖標(biāo)？有什么好處？
如果你學(xué)過一些類似“精靈圖”這樣可以節(jié)省頁面資源請求的東西的話，那你會很容易就明白字體圖標(biāo)的意義。這都是為了減少請求，提交頁面的效率啊。
在很多時候，一個圖片的字節(jié)數(shù)要遠(yuǎn)大于一個字的字節(jié)數(shù)，所以如果我們傳輸一個類似圖標(biāo)的字體的會比傳輸一個圖標(biāo)圖片好節(jié)省傳輸資源。
另外一個好處是，轉(zhuǎn)成字體后的圖標(biāo)就可以像字體一樣操作了，可以很容易地更改圖標(biāo)的顏色和大小。

-- 字體圖標(biāo)的不足
既然字體圖標(biāo)那么有效率，那么為什么不都使用字體圖標(biāo)呢？現(xiàn)在的限制主要是字體圖標(biāo)的開發(fā)要求比較高，畢竟是開發(fā)一種“字體”。所以很多時候特別的圖標(biāo)（如公司logo）都使用有原始的圖標(biāo)文件，而通用的可以使用字體圖標(biāo)（搜索圖標(biāo)啊，編輯圖標(biāo)啊。）

自己開發(fā)字體圖標(biāo)很累，幸好有很多樂于分享的coder，現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來。

比較知名的有
- iconmoon：https://icomoon.io/
- 阿里旗下的iconfont：iconfont官網(wǎng)

下面的例子使用阿里旗下的iconfont為例

iconfont的使用

1.首先，進(jìn)入阿里旗下的iconfont官網(wǎng)iconfont官網(wǎng)搜索你想要的圖標(biāo)。

2.選擇圖標(biāo)，把圖標(biāo)添加入庫

3.然后在右上角的小車子那里把圖標(biāo)下載下來。

點擊下載代碼

4.下載的是一個壓縮包，解壓后得到：

5.demo_index.html有介紹如何使用iconfont，不過我這里也介紹一下（因為有些人覺得那個教程不太好理解，沒有一步步來）。

基于unicode的用法：

1.首先，把iconfont.eot，iconfont.woff2，iconfont.woff，iconfont.ttf，iconfont.svg拷貝出來，放到與自建的測試用的頁面demo.html位于同一個頁面。

2.在測試頁面中定義字體類型（這個可以從壓縮文件自帶的demo_index.html文件找到）：

    /* css語法：定義字體類型 */
    @font-face {
      font-family: "iconfont";
      src: url("iconfont.eot");
      src: url("iconfont.eot?#iefix") format("embedded-opentype"),
          url("iconfont.woff2") format("woff2"),
          url("iconfont.woff") format("woff"),
          url("iconfont.ttf") format("truetype"),
          url("iconfont.svg#iconfont") format("svg");
    }

3.在頁面中定義字體樣式（這個可以從壓縮文件自帶的demo_index.html文件找到）：

    /* 定義圖標(biāo)的樣式，使用了樣式，圖標(biāo)才能正常顯示 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 28px;
      color:red;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

4.隨便定義一個元素，如span，給元素加上上面定義的樣式，然后元素里面的文本是一串unicode碼，這個碼可以從壓縮文件自帶的demo_index.html文件找到。

完整代碼如下：

補(bǔ)充

由于上面是使用特殊的字體格式把unicode碼變成一個“像圖標(biāo)的字體”，所以上面的圖標(biāo)是可以使用字體的所有特性的（字體顏色，字體大小等等）,這樣可以很輕易地更改圖標(biāo)的顏色和大小。
上面定義字體類型時使用的url是一個路徑，是當(dāng)前文件與字體文件的相對路徑，所以如果字體文件不與測試網(wǎng)頁位于同級目錄下，那么要更改。
@font-face這個語法我就不介紹了，這是CSS3的內(nèi)容，不會的自己查一下吧，不想查的你就僅僅ctrl+c和ctrl+vdemo_index.html文件中的內(nèi)容即可。
這里就介紹了基于unicode的用法，相信“入了門”后，你可以很輕易地從demo_index.html中學(xué)會后面的兩種用法。（常用的還是基于unicode的用法和基于class的）。