字體圖標的使用

shuibo 發布于2019-04-23 11:54 / 2114人閱讀

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

字體圖標的介紹
iconfont的使用
- 基于unicode的用法：
- 補充

首發日期：2019-01-13

字體圖標的介紹

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

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

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

自己開發字體圖標很累，幸好有很多樂于分享的coder，現在有很多網站把一些常用的圖標都做成了字體圖標分享了出來。

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

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

iconfont的使用

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

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

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

點擊下載代碼

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

完整代碼如下：

補充

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

云服務器 GPU云服務器字體圖標圖標字體圖標字體庫使用自定義字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1335.html

iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
字體圖標(font-icon)，你還有什么理由不使用它？

摘要：自己制作字體圖標的時候有需要注意這些阿里圖標庫的圖標多，免費但是編輯器不如好用。建議設計師對于一些常用圖標直接去阿里圖標庫找，下載文件即可。優點下面的簡介來自，著名字體圖標庫Font Awesome的首頁，http://fontawesome.io： Font Awesome gives you scalable vector icons that can instantly b...

felix0913 2019-08-29 11:19 評論0 收藏0
web字體

摘要：字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。推薦網站字庫成立于年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。這個字體圖標可以在下免費使用。1.字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關字體格式的知識。1、TureType(.ttf)格式.ttf字體是Windows和Mac的最常見的字體，...

番茄西紅柿 2019-04-22 19:50 評論0 收藏1
CSS 小結筆記之圖標字體（IconFont）

摘要：本篇主要介紹一種非常好用的圖標大法圖標字體。圖標字體可以非常便捷的去解決以上問題，使用起來也非常簡單。并且改變圖標大小只需要改變字體大小就可以了。　　本篇主要介紹一種非常好用的圖標大法——圖標字體（IconFont）。　　什么是圖標字體？顧名思義，它是一種字體，只不過這個字體顯示的并不是具體的文字之類的，而是各種圖標。　　網站上經常會用到各種圖標，之前網頁上使用圖...

番茄西紅柿 2019-04-23 13:20 評論0 收藏0
自己制作微信小程序使用base64字體圖標

摘要：問題微信小程序不能隨意使用網絡資源，如字體文件等不能在小程序中使用字體文件不能使用背景圖片定位來使用內部圖片下面就介紹一下如何制作字體圖標。簡易方式通過兩個在線工具，很容易地生成加密的字體圖標。問題： 1.微信小程序不能隨意使用網絡資源，如字體,css文件等 2.不能在小程序中使用字體文件 3.不能使用background-position背景圖片定位來使用內部png圖片下面就介紹...

leon 2019-08-29 16:18 評論0 收藏0