python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome經歷了兩年的進化，如今已成為不少工具性應用開發者的首選。但FontAwesome的圖標畢竟有限，在某些特定的情景中，FontAwesome的字體并不能準確地傳達合適的意義。為自己的Web App定制icon-font字體在某些時候就變成了一種需要。
因為想為公司的產品定制一套icon-font，把曾經那些不易改變不易調校大小顏色的圖片改成圖標字體，經過搜索和試用，發現icon-font大致有四類制作方法。這四類方法的圖標生成原理是一樣的，
主要步驟：
步驟一：使用矢量圖形編輯器設計圖標，畫布最好設為512px*512px。以Adobe?Illustrator為例，保存為svg格式時會彈出一個svg圖片屬性設置對話框。這時候請按下圖設置選項,
上圖來自Filament Group
步驟二：將svg圖標文件導入Glyph字型排版工具編輯調校，生成icon-font字體文件
步驟三：制作與字型編碼匹配的CSS文件供網頁調用
以下介紹的四大類型的icon-font制作方法的最大分別在于第二和第三步，也就是使用什么工具編輯和生成字體的不同，及是否自動生成CSS文件的區別。本文會忽略第三步CSS文件的制作的過程，重點介紹第二步的差別和心得。
1.?速成系?：一步到位
在線icon-font生成器，比如icomoon.io或fontello +?自制CSS文件
icomoon的icon-font生成器界面
IcoMoon和Fontello都支持直接拖拽svg格式的圖標到網頁上傳圖標，即時在線預覽不同字號的圖標字體效果，批量編輯圖標的CSS?class名稱和Unicode編碼，以及下載為全套web字體及CSS文件，可謂相當方便。
倘若下載之后發現其中某個圖標的名稱或編碼需要修改，而icon-font生成器已經被關閉，如果你需要編輯的圖標不超過10個，那么恭喜你，你依然有機會在幾分鐘內完成圖標字體的生成。但是如果需要修改的圖標太多，那么這種免費的在線編輯器恐怕會成為你的噩夢。
由此可見，免費的在線圖標編輯器只適合小批量快速的圖標編輯，圖標的質量取決于你在svg文件設計時的質量。
當然，如果你想使用在線的icon-font生成器服務于大型的圖標字體項目也不是不可以。icomoon就推出了Premium付費服務，你只需注冊并按使用期限付費，就可以在線保存icon-font編輯項目了。
速成系方法適合不擅長設計，想要快速獲得定制圖標庫的開發者。
2.?尊貴系：專業級的體驗?(Mac)
矢量圖形編輯軟件(Adobe?Illustrator)+Glyphs/Glyphs?Mini/FontLab + FontSquirrel?WebFont?Generator+?自制CSS文件
尊貴系，顧名思義，需要花費不少銀子才可以獲得正版使用權。
其中的Adobe?Illustrator不用多說，是矢量圖形設計利器。自Adobe推出CC按月付費以來，設計師對于Adobe軟件的支出便成了無底洞。雖然Affinity?Designer,?Sketch等眾多支持矢量圖形編輯的軟件紛紛推出滿足一次性付費的圖形編輯器市場的需求。但是畢竟這些新應用或多或少還有一些Bug，穩定性短時間內難及Illustrator。當然，如果你對其他矢量圖形編輯軟件有信心，在這一步把Adobe?Illustrator替換成其他你心儀的圖標編輯軟件，甚至直接使用接下來介紹的Glyphs制作亦可。
Glyphs
Glyphs是一套專業級的字形編輯器，完整版的價格約人民幣2000元，支持直接在Glyphs里創建矢量字形。Glyphs?Mini相比Glyphs主要保留了SVG導入，字體命名及字體文件導出的功能，價格約為完整版的十分之一。
全套價格不菲，如果你已是Illustrator的重度使用者，建議配合Glyphs使用。可視化的節目適合專業的字體設計師，及不愁經費的個人及團隊。相比接下來要介紹的開源系，Glyphs相信在字體編輯導出的效率上會大大提高。
FontLab TransType可用于轉換字體，導出不同格式的字體文件
FontLab公司出品的一系列字體編輯轉換工具與Glyphs類似，FontLab Studio也是專業級的，支持Mac和Windows平臺。因為沒有使用過，這里就不贅述。
使用Glyphs導出icon字體文件后，可以使用Font?Squirrel網站提供的Webfont生成器上傳由Glyphs導出的.ttf格式字體，然后選擇默認的Optimal選項，最后“Download Your Kit”，生成器就會默認生成包括.eot, .svg, .ttf, .woff, stylesheet.css及Demo頁面的文件。不過icon-font字體有時無法正常在它生成的Demo頁面正常預覽到。這個Font Squirrel的字體生成器會更加適合英文字體的生成和排版效果預覽。
FOnt Squirrel Web Generator截圖
如果你想高度定制導出的WebFont Kit的文件類型，可以選擇Expert進行更多設置
2.?開源系：尊貴系能做到的，我也可以，只是...(Windows/Linux/Mac)
InkScape + FontForge + FontSquirrel?WebFont?Generator
不同于尊貴系，這一系的軟件全部是開源的，支持全平臺。
InkScape是一款開源的矢量圖形編輯工具，點擊菜單欄Text?>?Glyph即可進入字型編輯面板。不同于Illustrator只能瀏覽自行，InkScape的Glyph還可以將當前選中的圖層添加到為新的Glyph。不過過程稍稍麻煩，這就是開源軟件的不便之處。畢竟缺少組織性的綜合產品設計規劃與開發，InkScape看似功能俱全，但界面圖標設計和易用性欠佳。
FontForge是一款開源的字體編輯工具，在windows和Linux上上有GUI版本，在Mac上可以通過命令行安裝。雖然功能上幾乎接近專業級的收費軟件Glyph，可以導入svg文件，編輯字體信息，調整字型樣式，但是在體驗上真的談不上方便，不少操作有些繁雜，有一些明顯的Bug。但它畢竟是開源的軟件，并且在2014年中重新開始了開發與更新。
4.?竹林系：搞定命令行如有輕功(Mac/Linux)
矢量圖形編輯軟件(Adobe?Illustrator)+FontCustom命令行
Font Custom網站截圖
我嘗試用過兩次，第一次是在幾個月前，搜索icon-font制作指南時發現了放在Github上的開源項目FontCustom，但那是因為不是很明白這類基于RubyGems的工具的安裝運行原理，所以沒有安裝成功。
第二次嘗試是在今天，因為重裝過Yosemite的Mac系統，于是從零開始跟著安裝指南安裝了RubyGems，Brewhome，FontForge。據說只要運行一句命令行，程序會自動把存有svg源文件的圖標自動生成為webfonts，同時會生成css文件和HTML預覽文件。
現有的一個icon-font庫Ionicons的目錄結構及Cheatsheet預覽頁面的樣式就同FontCustom非常相似。他們都是基于Python的程序自動生成的。
用戶可以自己在yml文件中設定模板生成參數，支持直接生成到指定路徑的文件夾，或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法，則無需依賴在線的icon-font生成器，可以在本地意見生成icon字體和全套的頁面文件。這就使得圖標的修改更新和預覽非常方便，也非常方便團隊協作。
但沒有什么是完美的。FontCustom雖然長遠看來十分方便，但是如果沒有命令行使用經驗，要自己安裝和上手是有些復雜的。
另外在安裝fontCustom時用到了一個listen的package，安裝時提示2.8.4的版本503錯誤，最后是手動安裝了listen的2.8.3的版本，才得以繼續FontCustom的安裝。
另外fontCustom在生成文件的模板設定上還需要下一番功夫，才能讓生成的文件版本、名稱和結構稱心如意。
小結
以上四大類的icon-font生成方法適用于不同的項目和人群，歡迎自行挑選。尊貴系的部分軟件因為沒有親自購買體驗，描述全靠印象。個人目前使用icon-font的項目屬于長期需要優化修改且需要團隊協作的大型web應用，所以個人選擇使用第四種方案，也就是FontCustom。
至于icon-font制作的第一步，也就是SVG icon設計的部分其實也是一個很有學問的步驟，尤其當icon要面對不同字體的挑戰時，尤其是14px以下的字體時，有可能顯示不清或是有鋸齒，這就需要在圖形構思方面下更多功夫。
今年最讓我喜歡的icon-font庫不是FontAwesome，而是Drift公司為旗下ionicFramework配套設計的icon-font Ionicons。今天的icon-font圖標研究少不了對Ionicons 2.0的文件結構的研究。從樣式上看，Ionicons或許也使用了FontCustom生成字體，不過他們高度定制了Python Script，實現了更加進階的諸如CheatSheet生成的功能。
最后，icon-font只是用于網站圖片展示的方法之一，不見得適用于所有項目，尤其是基于Marketing的小型項目，有時直接使用svg或png圖片效率更高。
歡迎有興趣的朋友參與討論。
參考資料
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的python 图标字体_Icon-font图标字体的四类制作方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 智商重要还是情商重要？
- 下一篇： python翻译成matlab_matl