把圖標轉成web字體

對字體你們必定不陌生
通常使用Font-family: Georgia, SimSun, 「宋體」設置字體。字體主要使用兩種:襯線和非襯線，但這不是咱們這章的主要內容。
這章要說的是如何把本身設計的icon轉成font，在網頁上使用！

字體圖標除了圖像清晰度以外，主要仍是清晰度，特別是用於手機上多屏的狀況不管屏幕何種分辨率都不會模糊，不用額外作響應處理。其次是靈活度，使用字體圖標能夠隨意設置大小和顏色，不用由於一點不同又從新切圖。

兼容性，ttf,svg支持低版本，woff支持谷歌火狐等，若是隻是手機上使用可使用woff格式就能夠了。特別注意，若是引入字體不在同一個域名下是會出現跨域的，沒法下載字體。設置CORS作處理能兼容到ie7。

1,在這裏要使用到一個編輯字體的軟件FontForgeBuilds，下載地址：網下找一個好了

2,安裝完打開以後選擇一個字體，或者新建一個字體：

能夠看到這是已經有字的字體

3,選擇一個空的，右鍵New Outline Window打開這個字的路徑，把咱們事先準備好的icon的帶路徑的svg（這個能夠找UI小姐姐幫忙導一個，ai畫好icon後路徑輪廓化描邊導出svg就能夠用） 從File處Import進來，調整一下位置，能夠在字體那頁看到這個icon的顯示位置

4,回到字體頁，右鍵該字，選擇Glyph Info修改name和value值，value值用於在頁面上顯示

5,生成字體，從File處Generate Fonts，選擇要生成的字體格式，和存放的位置，肯定後點擊Generate ，接下來會彈出錯信息但不要管它，直接Generate。

6,使用爲剛剛編輯的那個字的標識

<style>
//引入字體{}
    @font-face {
        font-family: custom;
        src: url(aaa.woff) format("woff");
        font-weight: 400;
        font-style: normal
    }
    body{font-family: custom;}
</style>
<p>&#x0001;123456</p>

咱們剛剛導入的那個搜索icon就出來了：

感受牛X轟轟，我都被本身征服