字體圖標的繪製和使用技巧

從事前端的朋友應該對「字體圖標」這個詞彙不陌生，爲了適應愈來愈挑剔的屏幕，網頁圖標和簡單圖案使用 .png 來搭建已經基本上被淘汰了。取而代之的是使用 css3 和 svg 來繪製，而對於網頁小圖標，咱們更但願在整個系統的前端架構中將它們作成字體庫統一管理。以下圖：

若是在任意一個頁面只須要引用一個 css 樣式就能實現庫中的任意一個圖標，並且只須要定義 font-size 就能控制圖標的大小，是否是很方便？

我是主後端的程序員，很早之前就在項目中使用過字體圖標，可是以前用於製做圖標庫的 svg 都是美工幫我畫好，因此一直沒有深究其中的原理，直到近期不得不本身製做纔對其好好研究了一下。

這裏先跟你們推薦兩個管理字體圖標庫的工具網站：

icomoon.io

www.iconfont.cn/plus

icomoon 大名鼎鼎，不過我的認爲 iconfont 阿里巴巴的矢量圖標庫更符合國人的使用習慣，能夠託管圖標，更方便作版本管理，不過缺點是阿里巴巴會對你上傳的圖標對全部人開放下載，並且每一個圖標必需限制在20k之內。

下面我從svg繪製和代碼實現兩方面將初次製做字體圖標遇到的坎和你們分享一下，願後來者不要入坑。

---

一、svg繪製

首先咱們要準備的是矢量圖繪製工具，這裏我選擇 illustrator，如下是設計師給個人原圖：

好，我先直接對它導出看看效果

除了文字，全部部分都不能用，並且藍色的背景色是不能要的，不可能之後修改了背景色還要去修改圖標。

爲了找到是什麼緣由形成的，我對圖標進行了從新繪製。

導出看了一下效果

好了以前惟一可用的文字也沒了，因而在 google 和百度上查，最後找到了一則製做說明：

按照要求，我對外面的這個圈，文字（要先進行建立輪廓操做），箭頭，還有問號下面這個點進行了輪廓化描邊

哈哈，完美！

---

其實在製做過程當中仍是碰到了一個小問題，由於 iconfont 要求製做完成的 svg 必需要小於 20k 才能上傳，因爲我以前對 illustrator 工具的不瞭解，按照之前使用 Photoshop 的習慣，對不須要導出的畫板和圖層進行隱藏，而後存儲爲 svg 格式，可是文件的大小一直下不來：

我一直覺得是我繪製的問題，實在找不到緣由，因而改變畫布的大小在嘗試，這種作法可能有點傻，嘗試以前我就知道矢量圖尺寸跟文件的大小沒有一丁點關係，可是也算是瞎貓碰上死耗子，當我增長了一個小畫板再存儲的時候看到了：

切換小畫板再儲存確實讓文件的大小下來了，算是臨時解決問題吧，但總以爲應該有更好的方案，這麼作太麻煩了，導出以前還得記住畫板的序號，這太反人類了，直到有一次我無心中將工做區切換成web工做模式：

原來直接能夠將繪製好的圖像拖到資源導出的區域，我是在完成全部的工做以後才發現這個功能，想一想浪費的時間，心塞塞的~~~

二、網頁實現

解決了svg的繪製問題以後網頁上實現就很是簡單了，甚至iconfont都已經把代碼給咱們寫好了：

css

svg {
    background: red;
}

html

<script src="http://at.alicdn.com/t/font_nbcbmernh4pr2j4i.js"></script>
<svg>
    <use xlink:href="#icon-trouble"></use>
</svg>

這段 js 其實就是對 svg 的一個封裝，更方便咱們管理圖標和實現。

補充說明：用 js 封裝的方式不支持 IE8 及如下版本的瀏覽器，此外還能夠將圖標生成字體文件，而後經過 css 加載，這種方式兼容性更好，不過不支持單一圖標實現多色彩。

雁過留聲，閱過點贊哈~~~

---

個人公衆號《有刻》，咱們共同成長！