手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

如何把你的圖標(biāo)轉(zhuǎn)換成web字體

2015-9-17    博博

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體1
  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體2
  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體3
  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體4
  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體5
  • 如何把你的圖標(biāo)轉(zhuǎn)換成web字體6
分步閱讀

 

在這篇教程中,我們將看看如何使用一個(gè)免費(fèi)的Web應(yīng)用程序IcoMoon將矢量圖轉(zhuǎn)換成Web字體。然后在看看如何使用生成的字體通過(guò)css應(yīng)用到Web頁(yè)面中。

使用字體圖標(biāo)的優(yōu)勢(shì)

字體圖標(biāo)除了圖像清晰度之外,比位圖還有哪些優(yōu)勢(shì)呢。

適用性:一個(gè)圖標(biāo)字體比一系列的圖像(特別是在Retina屏中使用雙倍大小的圖像)要小。一旦圖標(biāo)字體加載了,你的圖標(biāo)就會(huì)馬上渲染出來(lái),不需要下載一個(gè)圖像。

可擴(kuò)展性:圖標(biāo)字體可以用過(guò)font-size屬性設(shè)置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標(biāo),然而,使用位圖,你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。

靈活性:文字效果可以很容易地應(yīng)用到你的圖標(biāo)上,包括顏色,陰影和翻轉(zhuǎn)等效果。他們還可以在任何背景下顯示。

兼容性:網(wǎng)頁(yè)字體支持所有現(xiàn)代瀏覽器,包括IE低版本。詳細(xì)兼容性可以點(diǎn)擊這里。

方法/步驟

  1. 1、準(zhǔn)備你的插圖

    首先,你需要能創(chuàng)建矢量圖標(biāo)的程序,并且能夠找到輸出SVG格式,比如“Illustrator”或者“iNkscape”。

    當(dāng)你設(shè)計(jì)的時(shí)候,你可以使用任何你喜歡的顏色,但是圖標(biāo)必須是一個(gè)純色。確保每個(gè)圖標(biāo)的尺寸大小是相同的。有一個(gè)圖標(biāo)更高或者更寬,會(huì)很難創(chuàng)建一個(gè)一致的字體。在這里,我們不得不減少飛艇圖標(biāo)的寬度,以便它匹配其他圖標(biāo)。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  2. 2、清理

    仔細(xì)檢查每一個(gè)圖標(biāo),以確保它沒有缺陷——細(xì)節(jié)在小尺寸上是完全的,當(dāng)你放大的時(shí)候小的缺陷就能被發(fā)現(xiàn)。在所示圖標(biāo),我需要?jiǎng)h除參差不齊的路徑。

    在Illustrator中,使用Pathfinder工具統(tǒng)一層疊元素,減去前面元素,比如這些圖標(biāo)中的星星圖標(biāo)。

    關(guān)鍵的原則是確保你的圖標(biāo)是可讀的小尺寸。心可能的簡(jiǎn)化。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  3. 3、導(dǎo)成svg

    現(xiàn)在,選擇一個(gè)圖標(biāo),并將它復(fù)制粘貼到一個(gè)新的文檔場(chǎng)景中(例如200px X 200px)??s放也是符合。你可能會(huì)發(fā)現(xiàn)它有一個(gè)基線尺寸的設(shè)置。使用彩色的圖標(biāo),比如說(shuō)在白色的背景中使用黑色的圖標(biāo)。

    現(xiàn)在,選擇菜單“文件”中“保存”,并選擇將文件保存成“SVG”格式。使用默認(rèn)的SVG設(shè)置。一旦你這樣做,所有的圖標(biāo),你可以創(chuàng)建一個(gè)Web字體。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  4. 4、導(dǎo)入到IcoMoon

    打開IcoMoon Web app。 導(dǎo)入一個(gè)圖標(biāo),點(diǎn)擊“Imort icons”按鈕,然后選擇您想要添加的SVG文件——您也可以一次添加多個(gè)文件。這些圖標(biāo)將會(huì)出現(xiàn)在“Your Custom Icons”區(qū)域中。如果他們是高亮的黃色顯示,表示這些圖標(biāo)是你將要?jiǎng)?chuàng)建的圖標(biāo)字體。在這個(gè)例子中,你可以看到,我不僅導(dǎo)出我自己創(chuàng)建的圖標(biāo),我還在 “Mini-icons”中添加了別的圖標(biāo)。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  5. 5、從IcoMoon中導(dǎo)出字體

    如果你想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn),你可以點(diǎn)擊“Edit”按鈕??梢允褂谩癝ave Copy”按鈕來(lái)創(chuàng)建圖片的變化(例如,一個(gè)鏡像的釁標(biāo))。添加一個(gè)有意義的圖標(biāo)標(biāo)記,因?yàn)檫@將被用來(lái)生成類名。

    當(dāng) 你都準(zhǔn)備好了,點(diǎn)擊屏幕底部的“Font”按鈕開始生成字體。這樣你就可以指定哪個(gè)圖標(biāo)映射到哪個(gè)字符上,例如,如果你要設(shè)置一套六個(gè)旋轉(zhuǎn)的球,你可以每 這六個(gè)球分別指定字符:q、w、e、r、t和y。你也可以根據(jù)你自己的愛好選擇一個(gè)字體的名字。你也可以調(diào)整字體的指標(biāo),除非你要設(shè)置你息定的字體和標(biāo)準(zhǔn) 文本,不然你真的不需要擔(dān)心這個(gè)。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  6. 6、下載字體文件

    單擊“Download”下載字體包到你的電腦上。他有一個(gè)字文件夾包含了字體本身(woff,eot,ttf格式),以及一個(gè)HTML示例頁(yè)面和相應(yīng)的CSS。甚至還有一個(gè)javascript文件和一個(gè)解決方法,如果你需要支持IE或IE7。

    將 font文件夾復(fù)制到你的網(wǎng)站,為你的項(xiàng)目添加字體。你需要從style.css文件中復(fù)制CSS樣式,并粘貼到你網(wǎng)站的CSS文件中,但是我的方法是將 它重命名為font.css,并保持他作為一個(gè)單獨(dú)的CSS文件。你需要的時(shí)候在把這個(gè)CSS文件引入到你的HTML中。

    如何把你的圖標(biāo)轉(zhuǎn)換成web字體
  7. 7、調(diào)用字體

    正如你看到的樣本文件index.html,有兩種方法可以調(diào)用,一種是通字符(unicod或名稱),另一種是通過(guò)類名。第一個(gè)例子使用了HTML5的data-icon自定義屬性。

    在這里,fs1類名用于設(shè)置字體的大小。這個(gè)“aria-hidden”屬性有助于確保字符能屏幕閱讀器讀到。

    第二種方法使用一個(gè)span元素:

    這個(gè)方法是非常有用的,你的字符可以與文本在內(nèi)聯(lián)中一起顯示。

  8. 8、先進(jìn)的想法

    正如我們剛剛懸停狀下改變圖標(biāo)顏色一樣,我們可以使用的顏色屬性和字體屬性修改圖標(biāo)。你可以設(shè)置其他屬,比如文本陰影和透明度,來(lái)設(shè)置圖標(biāo)的效果。

    END

注意事項(xiàng)

  • Symbol字體可以使用一個(gè)專用的字體創(chuàng)建應(yīng)用程序,比如說(shuō)Glyphs,但是一個(gè)專業(yè)的排版工具之外的需求或要求構(gòu)建一個(gè)簡(jiǎn)單的圖標(biāo)字體,比如說(shuō)間距和粗細(xì)這樣的物理關(guān)系并不是非常重要。
  • 目前為止,最簡(jiǎn)單的方法是使用Keyamoon制作的一個(gè)Web應(yīng)用程序IcoMoon,可以解決字符轉(zhuǎn)換成Web字體的所有麻煩。
  • 這個(gè)Html5應(yīng)用程序解決了創(chuàng)建字體文件和如何使用創(chuàng)建的圖標(biāo)字體的一切麻煩。IcoMoon附帶了大量的圖標(biāo),你也可以通過(guò)圖標(biāo)庫(kù)添加更多的圖標(biāo),其中大部分都可以免費(fèi)使用(使用時(shí)請(qǐng)先查看他們的許可證)。如果你正在尋找如“文件下載”和“購(gòu)物車”一樣的圖標(biāo),那么你會(huì)發(fā)現(xiàn),使用標(biāo)準(zhǔn)的圖標(biāo)比你自己創(chuàng)建的要方便得多。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔