@ : 因?yàn)橄霝楣镜漠a(chǎn)品定制一套icon-font，所以我把那些難改、難調(diào)整大小和顏色的圖片改成了icon字體。經(jīng)過搜索嘗試，發(fā)現(xiàn)icon-font的制作方式大致有四種。這四種方法的圖標(biāo)生成原理是相同的。今天就總結(jié)一下，希望對(duì)同學(xué)們有所幫助。
經(jīng)過兩年的演變，它已經(jīng)成為眾多工具應(yīng)用開發(fā)者的首選。但是圖標(biāo)的圖標(biāo)畢竟是有限的，在某些特定的情況下，字體的字體并不能準(zhǔn)確地傳達(dá)出適當(dāng)?shù)暮x。為您自己的 Web 應(yīng)用程序定制圖標(biāo)字體有時(shí)會(huì)成為一種需要。
主要步驟：
步驟1
使用矢量圖形編輯器設(shè)計(jì)圖標(biāo)，畫布最好設(shè)置為512px*512px。以 Adob??e 為例，保存為 svg 格式時(shí)，會(huì)彈出 svg 圖片屬性設(shè)置對(duì)話框。此時(shí)，請(qǐng)按如下所示設(shè)置選項(xiàng)：
上圖來自集團(tuán)
第2步
將svg圖標(biāo)文件導(dǎo)入Glyph字體排版工具進(jìn)行編輯調(diào)整，生成icon-font字體文件
第 3 步
制作與網(wǎng)頁字體編碼匹配的 CSS 文件以供調(diào)用。
下面介紹的四種icon-font制作方法最大的區(qū)別在于第二步和第三步，也就是用什么工具來編輯和生成字體的區(qū)別，以及是否自動(dòng)生成CSS文件的區(qū)別。本文將忽略第三步制作CSS文件的過程，重點(diǎn)介紹第二步的區(qū)別和經(jīng)驗(yàn)。
碰撞系統(tǒng)：一次一步
在線圖標(biāo)字體生成器，如 .io() 或 () + 自制 CSS 文件
圖標(biāo)字體生成器界面
兩者都支持將svg格式的圖標(biāo)直接拖放到網(wǎng)頁上傳圖標(biāo)，在線即時(shí)預(yù)覽不同字體大小圖標(biāo)的字體效果，批量編輯圖標(biāo)的CSS類名和代碼，下載全套網(wǎng)絡(luò)字體和 CSS 文件。很方便。
如果下載后面發(fā)現(xiàn)需要修改其中一個(gè)圖標(biāo)的名稱或編碼，并且icon-font生成器已經(jīng)關(guān)閉，如果你需要編輯的圖標(biāo)不超過10個(gè)，那么恭喜你，你還有有機(jī)會(huì)在幾分鐘內(nèi)完成圖標(biāo)字體生成。但是如果要修改的圖標(biāo)太多，那么這個(gè)免費(fèi)的在線編輯器可能會(huì)成為你的噩夢(mèng)。
可見免費(fèi)的在線圖標(biāo)編輯器只適合小批量的快速圖標(biāo)編輯，圖標(biāo)的好壞取決于你的svg文件設(shè)計(jì)的好壞。
當(dāng)然，如果你想使用在線圖標(biāo)字體生成器服務(wù)于大圖標(biāo)字體項(xiàng)目，也不是沒有可能。已推出付費(fèi)服務(wù)。您只需注冊(cè)并支付使用期限，即可在線保存您的圖標(biāo)字體編輯項(xiàng)目。
速成課法適合不擅長設(shè)計(jì)，想快速獲取自定義圖標(biāo)庫的開發(fā)者。
聲望：專業(yè)級(jí)經(jīng)驗(yàn) (mac)
矢量圖形編輯 軟件 (Adobe) + / Mini/ + + 自制 CSS 文件
貴族系統(tǒng)，顧名思義，需要花費(fèi)大量金錢才能獲得原版的使用權(quán)。
不用說，Adobe 是矢量圖形設(shè)計(jì)的強(qiáng)大工具。自從 Adob??e 推出 CC 月付后，設(shè)計(jì)師在 Adob??e軟件 上的花費(fèi)就成了一個(gè)無底洞。雖然，為了滿足一次性付費(fèi)圖形編輯器市場的需求，已經(jīng)推出了許多支持矢量圖形編輯的軟件。但畢竟這些新應(yīng)用或多或少還是有一些bug，短時(shí)間內(nèi)很難達(dá)到穩(wěn)定。當(dāng)然，如果你對(duì)其他矢量圖形編輯器軟件有信心，可以在這一步將Adobe換成你喜歡的其他圖標(biāo)編輯器軟件，甚至可以直接使用接下來介紹的制作。
它是一套專業(yè)級(jí)的字形編輯器。完整版售價(jià)約2000元。它支持直接在其中創(chuàng)建矢量字形。與Mini相比，主要保留了SVG導(dǎo)入、字體命名和字體文件導(dǎo)出等功能，價(jià)格約為完整版的十分之一。
全套價(jià)格不菲，如果你已經(jīng)是重度用戶，建議搭配使用。視覺程序適用于專業(yè)的字體設(shè)計(jì)師，以及不愁錢的個(gè)人和團(tuán)隊(duì)。與接下來要介紹的開源系統(tǒng)相比，相信字體編輯和導(dǎo)出的效率會(huì)大大提高。
可用于轉(zhuǎn)換字體和導(dǎo)出不同格式的字體文件
公司出品的一系列字體編輯轉(zhuǎn)換工具，類似，也專業(yè)級(jí)，支持mac和平臺(tái)。由于沒有使用過，這里不再贅述。
使用導(dǎo)出的icon字體文件后，可以使用Font網(wǎng)站提供的()上傳導(dǎo)出的.ttf格式字體，然后選擇默認(rèn)選項(xiàng)，最后選擇“Your Kit”，生成器會(huì)生成.eot、svg , ttf, woff, , css 和 Demo 頁面文件。但是，icon-font 字體有時(shí)無法在其生成的 Demo 頁面上正常預(yù)覽。這個(gè)Font的字體生成器會(huì)更適合英文字體生成和排版效果預(yù)覽。
字體網(wǎng)頁截圖
如果要高度自定義導(dǎo)出Kit的文件類型，可以選擇進(jìn)行更多設(shè)置
開源部門：光榮部門能做的我都能做，只是……（/Linux/mac）
+ +
不同于貴族部門，這個(gè)部門的軟件都是開源的，支持所有平臺(tái)。
一個(gè)開源的矢量圖形編輯工具，點(diǎn)擊菜單欄中的Text > Glyph，進(jìn)入字體編輯面板。與僅瀏覽不同，Glyph 還可以將當(dāng)前選定的圖層添加到新的 Glyph。但是過程有點(diǎn)繁瑣，這就是開源軟件的不便之處。畢竟，缺乏有組織的全面產(chǎn)品設(shè)計(jì)規(guī)劃和開發(fā)?？此乒δ荦R全，但界面圖標(biāo)設(shè)計(jì)和易用性并不好。
一個(gè)開源字體編輯工具，在和 Linux 上具有 GUI 版本，可以從 mac 上的命令行安裝。雖然功能幾乎接近專業(yè)級(jí)的充電軟件Glyph，可以導(dǎo)入svg文件，編輯字體信息，調(diào)整字體樣式，但是從體驗(yàn)上來說確實(shí)不方便，很多操作有點(diǎn)復(fù)雜，并且有一些明顯的錯(cuò)誤。但它畢竟是開源的軟件，并且在 2014 年年中恢復(fù)了開發(fā)和更新。
竹林系：命令行輕松搞定（mac/Linux）
矢量圖形編輯 軟件 (Adobe) + 命令行
字體網(wǎng)站截圖
我嘗試使用它兩次。第一次是幾個(gè)月前。在搜索icon-font制作指南的時(shí)候，發(fā)現(xiàn)上面有開源項(xiàng)目所以安裝不成功。
第二次嘗試是今天字體制作軟件 mac，因?yàn)橹匮b了mac系統(tǒng)，所以我按照安裝指南從頭開始安裝，. 據(jù)說只要運(yùn)行命令行，程序就會(huì)自動(dòng)生成包含svg源文件的圖標(biāo)為css文件和HTML預(yù)覽文件。
現(xiàn)有圖標(biāo)字體庫的目錄結(jié)構(gòu)和預(yù)覽頁面的樣式非常相似。它們都是根據(jù)程序自動(dòng)生成的。
用戶可以自行在yml文件中設(shè)置模板生成參數(shù)，支持直接生成到指定路徑的文件夾，或者生成scss版本等。如果你掌握了命令行生成icon-font的方法，你就可以無需依賴在線圖標(biāo)字體生成器，即可在本地生成圖標(biāo)字體和全套頁面文件。這使得修改、更新和預(yù)覽圖標(biāo)非常方便，團(tuán)隊(duì)協(xié)作也非常方便。
但沒有什么是完美的。雖然從長遠(yuǎn)來看非常方便，但如果沒有命令行經(jīng)驗(yàn)，安裝和上手有點(diǎn)復(fù)雜。
另外，安裝時(shí)使用了一個(gè)，安裝時(shí)提示2.8.4的版本503錯(cuò)誤。最后手動(dòng)安裝了2.8.3的版本。繼續(xù)安裝。
另外，在生成文件的模板設(shè)置上還需要做一些工作，以使生成的文件版本、名稱和結(jié)構(gòu)符合要求。
概括
以上四類icon-font生成方式適用于不同的項(xiàng)目和人群，歡迎大家自行選擇。貴族系的部分軟件因?yàn)闆]有個(gè)人購買經(jīng)驗(yàn)字體制作軟件 mac，所以描述全憑印象。目前使用icon-font的個(gè)人項(xiàng)目屬于大型web應(yīng)用，需要長期優(yōu)化修改，需要團(tuán)隊(duì)協(xié)作，所以我選擇使用第四種方案，也就是。
至于icon-font制作的第一步，也就是SVG圖標(biāo)設(shè)計(jì)的部分，其實(shí)是一個(gè)很有學(xué)問的步驟，尤其是當(dāng)icon要面對(duì)不同字體的挑戰(zhàn)，尤其是字體在14px以下的時(shí)候，可能無法正常顯示。清晰或鋸齒狀，這在平面設(shè)計(jì)中需要更多的努力。
今年我最喜歡的icon-font庫不是Drift為其支持而設(shè)計(jì)的icon-font()。今天的icon-font icon研究對(duì)于2.0的文件結(jié)構(gòu)的研究是必不可少的。在風(fēng)格上，也可以使用生成字體，但它們是高度定制的，可以實(shí)現(xiàn)更高級(jí)的功能，如生成。
最后，icon-font 只是用于網(wǎng)站圖像顯示的方法之一。它不一定適用于所有項(xiàng)目，尤其是基于它的小型項(xiàng)目。有時(shí)直接使用 svg 或 png 圖像更有效。
歡迎感興趣的朋友參與討論。
【優(yōu)社12月最火神器免費(fèi)下載】
騰訊工程師出品的貼心神器！
《超實(shí)用神器！幫助設(shè)計(jì)師快速解決GIF圖片鋸齒問題》
您的才華橫溢的藝術(shù)家推薦的傳輸向量軟件！
“一秒位圖轉(zhuǎn)矢量！超級(jí)好用的矢量軟件 MAGIC”
一款幫你秒保存勵(lì)志圖片的瀏覽器插件神器！
《簡單快捷！為設(shè)計(jì)師量身定制的靈感圖集神器》OK