2022-05-27 分類: 網(wǎng)站建設(shè)
現(xiàn)在在提起Icon Font,已經(jīng)不是什么新鮮的詞匯了,網(wǎng)上已經(jīng)有很多介紹它的文章,并且很多網(wǎng)站也已經(jīng)將它用到,本篇主要是將制作Icon Font的整個(gè)流程整理一下,并且加入了自己在制作中遇到的問(wèn)題,使得大家可以在今后使用的時(shí)候可以很快上手并且避免這些問(wèn)題。
一、首先要說(shuō)的是,什么是Icon Font。
我認(rèn)為,我們現(xiàn)在通常所指的Icon Font,是用字體文件取代圖片文件,來(lái)展示圖標(biāo)、特殊字體等元素的方法。
二、知道了什么是Icon Font之后,我們要了解它能干什么,大家是怎么用的
這是一淘網(wǎng)用到Icon Font的地方
這是新浪微博微吧用到Icon Font的地方
這里還有我們自己做的小浪人
三、下面我們自然要看看Icon Font都有什么優(yōu)缺點(diǎn)了,從而決定我們是否要使用它
首先它的體積要比圖片小的多
這是做出來(lái)的一組Icon Font字體文件,試想一下如果這是圖片的話要有多大,50K?100K?甚至更多?然而現(xiàn)在這個(gè)文件的大小僅僅只有13K
不僅體積小,而且還具有更好的可維護(hù)性(因?yàn)槭鞘噶浚岳觳蛔冃?顏色可以自行更換,支持一些CSS3對(duì)文字的效果)
像這些圖片完全可以用Icon Font制作
并且還可以通過(guò)base64置于CSS內(nèi),從而不產(chǎn)生圖片的http請(qǐng)求
當(dāng)然,Icon Font也是有缺點(diǎn)的,由于是字體,所以只支持圖片上是純色的,多種顏色的就不支持了
這其中的表情有多種顏色,因此就沒(méi)法使用Icon Font了
但是在Win8下大量的純色圖標(biāo)的出現(xiàn),是否是Icon Font可以普及的一個(gè)機(jī)會(huì)呢?
雖然制作Icon Font自然而然要增加重構(gòu)的成本,但是跟后期維護(hù)相比還是值得的
四、Icon Font的優(yōu)點(diǎn)明顯要大于缺點(diǎn),并且有可以使用的空間,因此我們決定使用它之后,就要學(xué)會(huì)怎么去制作Icon Font
在制作之前我們要知道需要什么工具,其實(shí)很簡(jiǎn)單,只需要FontCreator,PS這兩個(gè)工具即可。
制作的過(guò)程,首先需要我們的設(shè)計(jì)師給出Icon的矢量圖,我們需要在PS中將這個(gè)Icon圖層?xùn)鸥窕?,之后保存為png24,再在FontCreator中通過(guò)圖片導(dǎo)入到字體中,進(jìn)行大小的調(diào)整(下面會(huì)給出字體制作各個(gè)值的用處,本人覺(jué)得比較重要的就是離左右的寬度以及離baseline的距離,最好一類icon的布局的一樣的,這樣也方便對(duì)齊),最后通過(guò)在線工具將字體文件轉(zhuǎn)換成我們需要的多種格式。
這是字體各個(gè)值的含義
因?yàn)椴煌臑g覽器所支持的字體問(wèn)題時(shí)有差別的,因此我們需要將我們制作好的字體轉(zhuǎn)換成多種格式,附上一個(gè)比較好的字體轉(zhuǎn)換在線地址:
http://www.fontsquirrel.com/fontface/generator 我們轉(zhuǎn)換的時(shí)候如果沒(méi)有特殊需要,直接通過(guò)basic轉(zhuǎn)換就可以
五、制作完成后我們當(dāng)然是要使用它了
首先是字體聲明,由于各個(gè)瀏覽器所支持的字體文件不同,因此我們要針對(duì)瀏覽器的這個(gè)特點(diǎn)制作多種字體文件以達(dá)到兼容的目的
要在網(wǎng)頁(yè)中顯示,目前有兩種方式,一種是直接在html中輸入相應(yīng)的Icon所代表的字體,好處是兼容所有瀏覽器,就是在更改Icon的時(shí)候需要下游的后端程序員同事協(xié)助更改。
另一種方法是在CSS中通過(guò)after偽類添加,這樣可以通過(guò)CSS直接控制Icon的類別,只是不是所有瀏覽器都兼容,但是我們必須考慮到IE6的用戶。
通過(guò)分析現(xiàn)在開(kāi)發(fā)的流程以及項(xiàng)目,用第一種方法在html中直接輸入是比較合適的。
當(dāng)然了,我們輸入的時(shí)候怎么去知道要輸入的字符是我要輸入的Icon呢?只需要通過(guò)查閱Unicode對(duì)照表,根據(jù)字體制作軟件中的Unicode碼進(jìn)行對(duì)比即可。
我們制作Icon Font是為了自己之后使用的,因?yàn)橐粋€(gè)方便管理并且使用的html組件頁(yè)面是必不可少的,其中應(yīng)該包括對(duì)Icon的描述、所對(duì)應(yīng)的代碼等等這些信息,目的就是在自己或者同事使用的時(shí)候可以很方便。
個(gè)人心得:
在制作Icon Font的過(guò)程中,自己也遇到了一些問(wèn)題
?跨域問(wèn)題,這個(gè)屬于老生常談了,通過(guò)配置自己的服務(wù)器或者放在同域下都可以解決,還可以使用base64置入CSS中。
?制作字體文件的時(shí)候一定要記得不要為了是文件過(guò)小而瞎刪里面的東西
這個(gè)軟件中前面的這幾個(gè)一定不要?jiǎng)h,否則大部分瀏覽器都讀不出來(lái)這個(gè)字體文件。
如果從PS導(dǎo)出的PNG24在導(dǎo)入字體文件的時(shí)候發(fā)生了變形,可以嘗試把PS中的矢量圖等比拉大后在存成PNG24導(dǎo)入。
網(wǎng)站標(biāo)題:新浪UED:教你快速制作Icon Font
轉(zhuǎn)載注明:http://m.rwnh.cn/news38/159838.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、面包屑導(dǎo)航、微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容