For investors
股價(jià):
5.36 美元 %For investors
股價(jià):
5.36 美元 %認(rèn)真做教育 專心促就業(yè)
因?yàn)橄霝楣镜漠a(chǎn)品定制一套icon-font,把曾經(jīng)那些不易改變不易調(diào)校大小顏色的圖片改成圖標(biāo)字體,經(jīng)過(guò)搜索和試用,發(fā)現(xiàn)icon-font大致有四類制作方法。這四類方法的圖標(biāo)生成原理是一樣的,今天總結(jié)一下,希望對(duì)同學(xué)們有幫助。
FontAwesome經(jīng)歷了兩年的進(jìn)化,如今已成為不少工具性應(yīng)用開(kāi)發(fā)者的首選。但FontAwesome的圖標(biāo)畢竟有限,在某些特定的情景中,F(xiàn)ontAwesome的字體并不能準(zhǔn)確地傳達(dá)合適的意義。為自己的WebApp定制icon-font字體在某些時(shí)候就變成了一種需要。
主要步驟:
步驟一
使用矢量圖形編輯器設(shè)計(jì)圖標(biāo),畫布最好設(shè)為512px*512px。以AdobeIllustrator為例,保存為svg格式時(shí)會(huì)彈出一個(gè)svg圖片屬性設(shè)置對(duì)話框。這時(shí)候請(qǐng)按下圖設(shè)置選項(xiàng):
上圖來(lái)自FilamentGroup
步驟二
將svg圖標(biāo)文件導(dǎo)入Glyph字型排版工具編輯調(diào)校,生成icon-font字體文件
步驟三
制作與字型編碼匹配的CSS文件供網(wǎng)頁(yè)調(diào)用。
以下介紹的四大類型的icon-font制作方法的最大分別在于第二和第三步,也就是使用什么工具編輯和生成字體的不同,及是否自動(dòng)生成CSS文件的區(qū)別。本文會(huì)忽略第三步CSS文件的制作的過(guò)程,重點(diǎn)介紹第二步的差別和心得。
速成系:一步到位
在線icon-font生成器,比如icomoon.io或fontello+自制CSS文件
icomoon的icon-font生成器界面
IcoMoon和Fontello都支持直接拖拽svg格式的圖標(biāo)到網(wǎng)頁(yè)上傳圖標(biāo),即時(shí)在線預(yù)覽不同字號(hào)的圖標(biāo)字體效果,批量編輯圖標(biāo)的CSSclass名稱和Unicode編碼,以及下載為全套web字體及CSS文件,可謂相當(dāng)方便。
倘若下載之后發(fā)現(xiàn)其中某個(gè)圖標(biāo)的名稱或編碼需要修改,而icon-font生成器已經(jīng)被關(guān)閉,如果你需要編輯的圖標(biāo)不超過(guò)10個(gè),那么恭喜你,你依然有機(jī)會(huì)在幾分鐘內(nèi)完成圖標(biāo)字體的生成。但是如果需要修改的圖標(biāo)太多,那么這種免費(fèi)的在線編輯器恐怕會(huì)成為你的噩夢(mèng)。
由此可見(jiàn),免費(fèi)的在線圖標(biāo)編輯器只適合小批量快速的圖標(biāo)編輯,圖標(biāo)的質(zhì)量取決于你在svg文件設(shè)計(jì)時(shí)的質(zhì)量。
當(dāng)然,如果你想使用在線的icon-font生成器服務(wù)于大型的圖標(biāo)字體項(xiàng)目也不是不可以。icomoon就推出了Premium付費(fèi)服務(wù),你只需注冊(cè)并按使用期限付費(fèi),就可以在線保存icon-font編輯項(xiàng)目了。
速成系方法適合不擅長(zhǎng)設(shè)計(jì),想要快速獲得定制圖標(biāo)庫(kù)的開(kāi)發(fā)者。
尊貴系:專業(yè)級(jí)的體驗(yàn)(Mac)
矢量圖形編輯軟件(AdobeIllustrator)+Glyphs/GlyphsMini/FontLab+FontSquirrelWebFontGenerator+自制CSS文件
尊貴系,顧名思義,需要花費(fèi)不少銀子才可以獲得正版使用權(quán)。
其中的AdobeIllustrator不用多說(shuō),是矢量圖形設(shè)計(jì)利器。自Adobe推出CC按月付費(fèi)以來(lái),設(shè)計(jì)師對(duì)于Adobe軟件的支出便成了無(wú)底洞。雖然AffinityDesigner,Sketch等眾多支持矢量圖形編輯的軟件紛紛推出滿足一次性付費(fèi)的圖形編輯器市場(chǎng)的需求。但是畢竟這些新應(yīng)用或多或少還有一些Bug,穩(wěn)定性短時(shí)間內(nèi)難及Illustrator。當(dāng)然,如果你對(duì)其他矢量圖形編輯軟件有信心,在這一步把AdobeIllustrator替換成其他你心儀的圖標(biāo)編輯軟件,甚至直接使用接下來(lái)介紹的Glyphs制作亦可。
Glyphs
Glyphs是一套專業(yè)級(jí)的字形編輯器,完整版的價(jià)格約人民幣2000元,支持直接在Glyphs里創(chuàng)建矢量字形。GlyphsMini相比Glyphs主要保留了SVG導(dǎo)入,字體命名及字體文件導(dǎo)出的功能,價(jià)格約為完整版的十分之一。
全套價(jià)格不菲,如果你已是Illustrator的重度使用者,建議配合Glyphs使用??梢暬墓?jié)目適合專業(yè)字體設(shè)計(jì)師,及不愁經(jīng)費(fèi)的個(gè)人及團(tuán)隊(duì)。相比接下來(lái)要介紹的開(kāi)源系,Glyphs相信在字體編輯導(dǎo)出的效率上會(huì)大大提高。
可用于轉(zhuǎn)換字體,導(dǎo)出不同格式的字體文件
FontLab公司出品的一系列字體編輯轉(zhuǎn)換工具與Glyphs類似,F(xiàn)ontLabStudio也是專業(yè)級(jí)的,支持Mac和Windows平臺(tái)。因?yàn)闆](méi)有使用過(guò),這里就不贅述。
使用Glyphs導(dǎo)出icon字體文件后,可以使用FontSquirrel網(wǎng)站提供的Webfont生成器上傳由Glyphs導(dǎo)出的.ttf格式字體,然后選擇默認(rèn)的Optimal選項(xiàng),最后“DownloadYourKit”,生成器就會(huì)默認(rèn)生成包括.eot、svg、ttf、woff、stylesheet、css及Demo頁(yè)面的文件。不過(guò)icon-font字體有時(shí)無(wú)法正常在它生成的Demo頁(yè)面正常預(yù)覽到。這個(gè)FontSquirrel的字體生成器會(huì)更加適合英文字體的生成和排版效果預(yù)覽。
FOntSquirrelWebGenerator截圖
如果你想高度定制導(dǎo)出的WebFontKit的文件類型,可以選擇Expert進(jìn)行更多設(shè)置
開(kāi)源系:尊貴系能做到的,我也可以,只是…(Windows/Linux/Mac)
InkScape+FontForge+FontSquirrelWebFontGenerator
不同于尊貴系,這一系的軟件全部是開(kāi)源的,支持全平臺(tái)。
InkScape
一款開(kāi)源的矢量圖形編輯工具,點(diǎn)擊菜單欄Text>Glyph即可進(jìn)入字型編輯面板。不同于Illustrator只能瀏覽,InkScape的Glyph還可以將當(dāng)前選中的圖層添加到為新的Glyph。不過(guò)過(guò)程稍稍麻煩,這就是開(kāi)源軟件的不便之處。畢竟缺少組織性的綜合產(chǎn)品設(shè)計(jì)規(guī)劃與開(kāi)發(fā),InkScape看似功能俱全,但界面圖標(biāo)設(shè)計(jì)和易用性欠佳。
FontForge
一款開(kāi)源的字體編輯工具,在windows和Linux上上有GUI版本,在Mac上可以通過(guò)命令行安裝。雖然功能上幾乎接近專業(yè)級(jí)的收費(fèi)軟件Glyph,可以導(dǎo)入svg文件,編輯字體信息,調(diào)整字型樣式,但是在體驗(yàn)上真的談不上方便,不少操作有些繁雜,有一些明顯的Bug。但它畢竟是開(kāi)源的軟件,并且在2014年中重新開(kāi)始了開(kāi)發(fā)與更新。
竹林系:搞定命令行如有輕功(Mac/Linux)
矢量圖形編輯軟件(AdobeIllustrator)+FontCustom命令行
FontCustom網(wǎng)站截圖
FontCustom
我嘗試用過(guò)兩次,第一次是在幾個(gè)月前,搜索icon-font制作指南時(shí)發(fā)現(xiàn)了放在Github上的開(kāi)源項(xiàng)目FontCustom,但那是因?yàn)椴皇呛苊靼走@類基于RubyGems的工具的安裝運(yùn)行原理,所以沒(méi)有安裝成功。
第二次嘗試是在今天,因?yàn)橹匮b過(guò)Yosemite的Mac系統(tǒng),于是從零開(kāi)始跟著安裝指南安裝了RubyGems,Brewhome,F(xiàn)ontForge。據(jù)說(shuō)只要運(yùn)行一句命令行,程序會(huì)自動(dòng)把存有svg源文件的圖標(biāo)自動(dòng)生成為webfonts,同時(shí)會(huì)生成css文件和HTML預(yù)覽文件。
現(xiàn)有的一個(gè)icon-font庫(kù)Ionicons的目錄結(jié)構(gòu)及Cheatsheet預(yù)覽頁(yè)面的樣式就同F(xiàn)ontCustom非常相似。他們都是基于Python的程序自動(dòng)生成的。
用戶可以自己在yml文件中設(shè)定模板生成參數(shù),支持直接生成到指定路徑的文件夾,或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法,則無(wú)需依賴在線的icon-font生成器,可以在本地意見(jiàn)生成icon字體和全套的頁(yè)面文件。這就使得圖標(biāo)的修改更新和預(yù)覽非常方便,也非常方便團(tuán)隊(duì)協(xié)作。
但沒(méi)有什么是完美的。FontCustom雖然長(zhǎng)遠(yuǎn)看來(lái)十分方便,但是如果沒(méi)有命令行使用經(jīng)驗(yàn),要自己安裝和上手是有些復(fù)雜的。
另外在安裝fontCustom時(shí)用到了一個(gè)listen的package,安裝時(shí)提示2.8.4的版本503錯(cuò)誤,最后是手動(dòng)安裝了listen的2.8.3的版本,才得以繼續(xù)FontCustom的安裝。
另外fontCustom在生成文件的模板設(shè)定上還需要下一番功夫,才能讓生成的文件版本、名稱和結(jié)構(gòu)稱心如意。
小結(jié)
以上四大類的icon-font生成方法適用于不同的項(xiàng)目和人群,歡迎自行挑選。尊貴系的部分軟件因?yàn)闆](méi)有親自購(gòu)買體驗(yàn),描述全靠印象。個(gè)人目前使用icon-font的項(xiàng)目屬于長(zhǎng)期需要優(yōu)化修改且需要團(tuán)隊(duì)協(xié)作的大型web應(yīng)用,所以個(gè)人選擇使用第四種方案,也就是FontCustom。
至于icon-font制作的第一步,也就是SVGicon設(shè)計(jì)的部分其實(shí)也是一個(gè)很有學(xué)問(wèn)的步驟,尤其當(dāng)icon要面對(duì)不同字體的挑戰(zhàn)時(shí),尤其是14px以下的字體時(shí),有可能顯示不清或是有鋸齒,這就需要在圖形構(gòu)思方面下更多功夫。
今年最讓我喜歡的icon-font庫(kù)不是FontAwesome,而是Drift公司為旗下ionicFramework配套設(shè)計(jì)的icon-fontIonicons。今天的icon-font圖標(biāo)研究少不了對(duì)Ionicons2.0的文件結(jié)構(gòu)的研究。從樣式上看,Ionicons或許也使用了FontCustom生成字體,不過(guò)他們高度定制了PythonScript,實(shí)現(xiàn)了更加進(jìn)階的諸如CheatSheet生成的功能。
最后,icon-font只是用于網(wǎng)站圖片展示的方法之一,不見(jiàn)得適用于所有項(xiàng)目,尤其是基于Marketing的小型項(xiàng)目,有時(shí)直接使用svg或png圖片效率更高。
【免責(zé)聲明】本文部分系轉(zhuǎn)載,轉(zhuǎn)載目的在于傳遞更多信息,并不代表本網(wǎng)贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)。如涉及作品內(nèi)容、版權(quán)和其它問(wèn)題,請(qǐng)?jiān)?0日內(nèi)與聯(lián)系我們,我們會(huì)予以更改或刪除相關(guān)文章,以保證您的權(quán)益!