字體圖標的使用

時間 2019-12-06

標籤字體圖標使用简体版

原文原文鏈接

目錄css

首發日期：2019-01-13html

字體圖標的介紹

-- 什麼是字體圖標?
在計算機上，文字本質上都是一些像素點，而圖標也是一些像素點，那麼有沒有辦法把某個字體的字作成圖標的樣子呢？因而有了字體圖標這種東西。字體圖標本質上是一種字體，不過它在表現意義上是一個圖標。web

-- 爲何使用字體圖標？有什麼好處？
若是你學過一些相似「精靈圖」這樣能夠節省頁面資源請求的東西的話，那你會很容易就明白字體圖標的意義。這都是爲了減小請求，提交頁面的效率啊。
在不少時候，一個圖片的字節數要遠大於一個字的字節數，因此若是咱們傳輸一個相似圖標的字體的會比傳輸一個圖標圖片好節省傳輸資源。
另一個好處是，轉成字體後的圖標就能夠像字體同樣操做了，能夠很容易地更改圖標的顏色和大小。svg

-- 字體圖標的不足
既然字體圖標那麼有效率，那麼爲何不都使用字體圖標呢？如今的限制主要是字體圖標的開發要求比較高，畢竟是開發一種「字體」。因此不少時候特別的圖標（如公司logo）都使用有原始的圖標文件，而通用的可使用字體圖標（搜索圖標啊，編輯圖標啊。）測試

本身開發字體圖標很累，幸虧有不少樂於分享的coder，如今有不少網站把一些經常使用的圖標都作成了字體圖標分享了出來。

字體

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

下面的例子使用阿里旗下的iconfont爲例網站

iconfont的使用

1.首先，進入阿里旗下的iconfont官網iconfont官網搜索你想要的圖標。
編碼

2.選擇圖標，把圖標添加入庫
url

3.而後在右上角的小車子那裏把圖標下載下來。

點擊下載代碼
spa

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文件找到）：

/* 定義圖標的樣式，使用了樣式，圖標才能正常顯示 */
    .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文件找到。

完整代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>測試</title>
    <style>
    /* 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');
    }
    /* 定義圖標的樣式，使用了樣式，圖標才能正常顯示 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 28px;
      color:red;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    </style>

</head>
<body>
    <!--  給元素的文字定義樣式才能把unicode碼值編碼成圖標 -->
    <span class="iconfont">&#xe638;</span>
</body>
</html>

補充

因爲上面是使用特殊的字體格式把unicode碼變成一個「像圖標的字體」，因此上面的圖標是可使用字體的全部特性的（字體顏色，字體大小等等）,這樣能夠很輕易地更改圖標的顏色和大小。
上面定義字體類型時使用的url是一個路徑，是當前文件與字體文件的相對路徑，因此若是字體文件不與測試網頁位於同級目錄下，那麼要更改。
@font-face這個語法我就不介紹了，這是CSS3的內容，不會的本身查一下吧，不想查的你就僅僅ctrl+c和ctrl+vdemo_index.html文件中的內容便可。
這裏就介紹了基於unicode的用法，相信「入了門」後，你能夠很輕易地從demo_index.html中學會後面的兩種用法。（經常使用的仍是基於unicode的用法和基於class的）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。