本文介紹如何使用現有的免費工具制作自定義的字體。
我們將會用到下面幾個免費的在線工具。
1） IconMoon ( https://icomoon.io/app/#/select/font )
IconMoon是一個優秀的免費創建自定網頁圖標字體的工具。提供一個在線的字體制作APP，也提供離線版的Chrome插件， 同時還提供免費開源的圖標供大家選用。支持上傳SVG格式的圖標或者單個字符。
2）EverythingFonts ( https://everythingfonts.com/ttf-to-svg )
EverythingFonts提供了豐富的字體轉換工具，可以把ttf，otf，wotf等字體轉換為SVG格式。
Fontfacegen（http://fontfacegen.com/ttf-to-svg-converter）也提供了類似的轉換功能。
使用上面兩個工具我們就能夠把自己喜歡的開源字符“搬”到我們的自定義字體中去。
第一步：使用字體轉換工具把TTF轉成SVG格式。
有一些開源的字體已經提供了SVG格式（例如：fontawesome-webfont.svg）可以下后面的步驟中直接上傳，就不需要字體轉換這一步了。當我們找不到SVG格式的字體的時候就比較適合用到這個工具。
EverythingFonts 的字體轉換器使用比較簡單，
a) 打開網頁，確認沒有版權問題，勾選“The EULAs of the font allow this conversion: ”
b) 后點藍色的“Pickup Font File”按鈕從本地上傳TTF字體文件。
c) 然后點綠色的“Convert”按鈕就可以下載轉換后的SVG文件了。
轉換后的SVG文件是包含字符編碼的，在后面我們導入之后別的字體的A也就會是我們自定義字體的A。
第二步：開始制作我們自己的字體
【1】直接在瀏覽器打開Iconmoon App( https://icomoon.io/app/#/select/font )
打開之后免費的iconmoon圖標已經顯示在你面前了，可以直接選用也可以點擊最后面的“Add Icons From Library…”鏈接去圖標庫里面去選。
【2】新建一個空的圖標集，這樣便於我們分類選用。
【4】使用圖標集旁邊的“import to set”菜單項，導入我們之前制作（或者開源）的.svg文件。
也可以在這里上傳你自己自作的SVG單個字符。
【5】編輯字符
如果是從別的字體導入過來的，有時候會發現實際排版會出現字符寬度不一的問題，
這樣的話我們就需要通過iconmoon的編輯功能進行修改。對於每個導入的每個字符，最好能在這里檢查一下。
a） 按下工具欄上的編輯按鈕。然后點擊需要修改的字符。
b) 在彈出的編輯界面我們可以對字符進行編輯和檢查
建議先勾選右上角“Gride”並且點擊旁邊數字選擇16x16的網格。
這樣編輯器會顯示一個網格，非常便於我們調整字體的位置和寬度。
字符編輯功能按鈕在字符的左下角位置。
旋轉，翻轉字符
位置調整
縮放
寬度和對齊
我們最常用到的幾個功能是位置調整功能和寬度調節功能, 因為導入的字體通常會出現兩個問題，
一是和其他字符基線高度不同，放在一起會出現自定義字符偏高或者偏低的現象。
我們在這里使用位置調整工具，借助網格就能夠修復這個問題。
二是字符寬度不一，造成個別字符過寬，文字排版顯得很亂影響閱讀。
在這里我們可以使用寬度調節按鈕，增加或者減少字符寬度來修正這個問題。
如果你需要更加復雜以及精確的修改，建議使用最下面的“Download（SVG)”按鈕下載這個對應字符的SVG文件，然后使用矢量繪圖軟件(例如AI）進行修改完成之后，再用“Replace”按鈕單獨上傳修改好的SVG字符進行替換。
【6】生成自定義字體
在頁面頂部按下選擇按鈕，切換的選擇狀態。然后選中你要導出的字符。
也可以使用每個自定義字符集右邊的“Select All / Deselect ”快速進行選擇。
點擊頁面最下端的“Generate Font ”按鈕就可以生成自定義的字體了。
在這個界面中你可以看到每個字體的字符編碼
把鼠標放到字符編碼上就會出現“<> Get Code” 鏈接。你就可以看到我們在HTML頁面上是可以怎么使用這個字符的。
一共有三種使用方式:
- 直接使用引入的class（需要在頁面上引用下載的CSS文件）
<span class="icon-exclam"></span> - 在CSS使用
.icon-exclam:before {
content: "\21";
} - 直接使用HTML實體編碼
!
【7】 下載字體。
直接點擊右下角的“download”按鈕就可以下載自定義的字體了。
下載的是個ZIP包，里面包含下面的文件。
- fonts文件夾 下面是生成的字體文件，是在網頁中使用自定義字體必需要用到的。
- style.css 是示例CSS，包含了定義字體的CSS代碼，你可以復制到自己的CSS文件中也可以直接使用。
- demo.html 頁面是每個字符的編碼和示例。查查這個文件可以方便你在HTML頁面中使用這些自定義字符。
- select.json 這個文件比較重要，它包含了這個自定義字體的所有信息。
【8】再次修改
select.json 文件包含了這個字符集里面所有字符的全部信息。
當我們發現有個別字符需要修改的時候，我們可以直接在 IconMoon APP中導入這個JSON文件（import to set）。然后再對個別字符進行修改。
編輯select.json 文件，我們還可以對字符編碼進行修改，例如我們想要在E600這個區間放導航圖標，在E900這個區間放統計圖標。把不同類別的圖標區分開來。我們就可以通過編輯這個文件來實現。
在select.json文件中，每一個字符都是一個JSON對象。擁有完全相同的結構。
icon\paths 屬性及時SVG的路徑值。
properties\code 屬性就是十進制的Unicode字符編碼。
我們只需要把對應的16進制Unicode編碼（E900, E800之類）轉換為十進制填寫到這里。
然后再導入 –>生成 —>下載就可以使用新的Unicode編碼了。
以上是我在實際應用中的一點經驗，希望能對大家有所幫助。