iconfont 在線預覽工具及其解析

工具在線連接

功能簡介

• iconfont web 在線預覽工具，無需安裝，打開即用。
• 可預覽本地 ttf 文件中定義的全部 icon。
• 也支持預覽 阿里iconfont 中的三種模式，unicode，Font class，Symbol。根據在線字體連接便可解析預覽其定義的全部icon。

需求背景

本工具用於解決如下問題

• 接手二手項目時，不清楚項目中定義了哪些 icon。

  • 接手二手項目，有時因爲交接不到位，只能找到引用的 css。但不清楚該 icon 庫具體包含哪些 icon。
  • 致使二次開發時，不能很好地複用以前的 icon，若引入新icon，可能還會重複定義。致使先後 icon 風格不統一。

• 使用外部樣式庫，成套的後臺管理系統框架時。找到其 icon 的定義列表比較麻煩。

  • 須要先找到對應的官網，再找到其對 icon 定義。整個過程較爲繁瑣。並且還不必定有介紹。
• 故筆者開發了這個 iconfont 在線預覽工具，無需安裝，打開web頁面便可預覽 icon 庫。

使用教程

使用本地文件

• 點擊按鈕
  
• 選擇 ttf 後綴文件
  
• 解析成功
  
• 點擊具體圖標，可複製該 icon 代碼
  

解析在線文件（針對阿里圖標庫）

• 複製在線資源連接

  • 針對 unicode 模式，複製在線 ttf 文件連接
    
  • 針對 Font class 模式，複製在線 css 文件連接
    
  • 針對 Symbol 模式，複製在線 js 文件連接
    
    
• 點擊解析
  
• 解析成功，點擊具體圖標，可複製該 icon 代碼
  

iconfont相關知識

以前一直只知道怎麼用 iconfont ，但並無深刻了解相關知識，最新學習了一下，在這裏跟你們分享。

阿里圖標三種模式

• unicode 模式

  • 它自己和引用外部自定義字體沒有區別。只是一個表現出來是圖形，另外一個是文字。對系統來講，沒有區別。

  • 引用 iconfont 和引用自定義字體，使用的代碼是同樣

    • 定義字體族

      @font-face {
          font-family: 'iconfont';  /* 自定義字體族名，能夠是任意名， */
          src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot'); /* 字體描述文件連接 */
          src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot?#iefix') format('embedded-opentype'), /* 兼容 IE9 */
          url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff2') format('woff2'), /* 兼容 IE6-IE8 */
          url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff') format('woff'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
          url('//at.alicdn.com/t/font_1357308_kygursq6jw.ttf') format('truetype'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */
          url('//at.alicdn.com/t/font_1357308_kygursq6jw.svg#iconfont') format('svg'); /* 兼容 iOS 4.1及以上 */
      }

    • 使用字體族（不管是文本仍是icon）

      .iconfont {
          font-family: "iconfont" !important; /*使用自定義字體或者icon*/
          /* 上面一句，和咱們平時定義「微軟雅黑」（font-family: "Microsoft YaHei", sans-serif;）字體是一樣的語法 */
          /* 只是「微軟雅黑」在大部分電腦都會自帶有，瀏覽器能直接找到系統的「微軟雅黑」字體描述文件，不須要咱們本身定義字體族，不須要使用外部的字體描述文件 */
      }

    • 「&#」的意思，「&#」 開頭的是HTML實體。全部 html 顯示的內容，均可以經過 的形式表述。例如，漢字的HTML實體由三部分組成，&#(中文對應ASCII碼);。例如，把「最新」 轉換成「最新」
    • 爲何中英文能直接顯示，不須要使用「&#」形式表示呢？由於中英文有 ASCII 進行自動轉義。而 iconfont 不在 ASCII 中定義。是自定義的。
    • iconfont 至關於使用了剩餘的 unicode 編碼，將自定義的圖標描述經過 開頭的 HTML 實體的形式表現出來。
    • 以「&#」開頭的後接十進制數字，以「&#x」開頭的後接十六進制數字

• Font class

  • 該模式和 unicode 模式是一樣的原理，經過 unicode 編碼保存。只是使用方式不一樣。
  • unicode 是直接將內容寫到 innerHTML 中轉義，而 font class 則是經過 css 的 :before 僞類，將經過 content 來定義。
  • 在 font class 中，「&#x」被轉義符「\」替換，由於「&#x」是 html 實體字符，只會被 html 解析，不能在 css 中被解析。
  • 經過阿里iconfont 給出的 css 連接，在瀏覽器中直接查看該文件能夠看到其定義

    
    

• Symbol

  • 該模式和上述兩者有本質區別，Symbol 模式是經過 svg 技術來描繪圖標，沒有運用到 unicode 編碼
  • 即經過不一樣的 svg 標籤來描繪不一樣的圖標。
  • 因爲使用的是 svg 技術，屬於圖形，而不只僅是字符。因此該模式支持彩色圖標。
  • 經過阿里 iconfont 給出的 js 連接，在瀏覽器中直接查看該文件能夠看到其定義
    
    

不一樣文件後綴的含義

• EOT（Embedded Open Type）是微軟創造的字體格式。在 IE 系列的瀏覽器下使用。
• SVG（Scalable Vector Graphics (Font)）是一種用矢量圖格式改進的字體格式。注意這裏的 svg 與 symbol 的 svg 是兩個概念。前者是 svg 類型的字體描述，後綴是直接描述svg 圖形。該模式在 ios 移動端中才支持
• OTF（OpenType Font）和 TTF（TrueType Font）是 Apple 公司和 Microsoft 公司共同推出的字體文件格式,隨着 windows 的流行,已經變成最經常使用的一種字體文件表示方式。目前主流瀏覽器都支持該模式。
• WOFF（Web Open Font Format），WOFF字體一般比其它字體加載的要快些，使用了 OTF 和 TTF 字體裏的存儲結構和壓縮算法。目前主流瀏覽器都支持該模式
• 其具體兼容性狀況，咱們能夠經過打開 iconfont 的 Font class 連接，經過備註信息得知。
  

工具代碼講解

• 工具 除了 vue 和 opentype.js，本工具僅由一個 html 文件完成。有興趣的同窗能夠點擊這裏查看源碼。

• 工具的原理很簡單，經過如下幾個步驟實現

  • 獲取字體定義文件。對於本地解析，經過input框獲取本地文件。對於在線文件，則經過 ajax 獲取字體定義文件。
  • 對於在線的 css 與 js 文件，經過正則匹配全部 icon 名稱，並經過數組保存。對於 ttf 文件，則藉助 opentype.js 進行解析。
  • 動態建立 dom，載入資源文件，並將採集到的全部 icon 遍歷顯示出來。

• 爲何本地文件只支持 ttf ？

  • 由於該文件類型的兼容性較好，在主流瀏覽器中都可使用。
  • 壁紙曾嘗試過使用 svg 文件，但發現其在chrome中沒法解析，後來才知道，該格式目前只在 ios 移動端使用

• 爲何須要藉助 opentype.js 解析 ttf 文件

  • 由於 ttf 文件經過 big-endian 編碼，使普通的方式沒法進行編碼轉義。沒法進行正則匹配。
  • 故藉助外部 opentype.js 庫進行圖標解析。

講完了，有空來個人博客坐坐呀!