国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

如何把你的圖標轉換成web字體

2015-9-17    博博

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

  • 如何把你的圖標轉換成web字體1
  • 如何把你的圖標轉換成web字體2
  • 如何把你的圖標轉換成web字體3
  • 如何把你的圖標轉換成web字體4
  • 如何把你的圖標轉換成web字體5
  • 如何把你的圖標轉換成web字體6
分步閱讀

 

在這篇教程中,我們將看看如何使用一個免費的Web應用程序IcoMoon將矢量圖轉換成Web字體。然后在看看如何使用生成的字體通過css應用到Web頁面中。

使用字體圖標的優勢

字體圖標除了圖像清晰度之外,比位圖還有哪些優勢呢。

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

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

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

兼容性:網頁字體支持所有現代瀏覽器,包括IE低版本。詳細兼容性可以點擊這里。

方法/步驟

  1. 1、準備你的插圖

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

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

    如何把你的圖標轉換成web字體
  2. 2、清理

    仔細檢查每一個圖標,以確保它沒有缺陷——細節在小尺寸上是完全的,當你放大的時候小的缺陷就能被發現。在所示圖標,我需要刪除參差不齊的路徑。

    在Illustrator中,使用Pathfinder工具統一層疊元素,減去前面元素,比如這些圖標中的星星圖標。

    關鍵的原則是確保你的圖標是可讀的小尺寸。心可能的簡化。

    如何把你的圖標轉換成web字體
  3. 3、導成svg

    現在,選擇一個圖標,并將它復制粘貼到一個新的文檔場景中(例如200px X 200px)。縮放也是符合。你可能會發現它有一個基線尺寸的設置。使用彩色的圖標,比如說在白色的背景中使用黑色的圖標。

    現在,選擇菜單“文件”中“保存”,并選擇將文件保存成“SVG”格式。使用默認的SVG設置。一旦你這樣做,所有的圖標,你可以創建一個Web字體。

    如何把你的圖標轉換成web字體
  4. 4、導入到IcoMoon

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

    如何把你的圖標轉換成web字體
  5. 5、從IcoMoon中導出字體

    如果你想調整圖標的位置、大小或旋轉,你可以點擊“Edit”按鈕。可以使用“Save Copy”按鈕來創建圖片的變化(例如,一個鏡像的釁標)。添加一個有意義的圖標標記,因為這將被用來生成類名。

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

    如何把你的圖標轉換成web字體
  6. 6、下載字體文件

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

    將 font文件夾復制到你的網站,為你的項目添加字體。你需要從style.css文件中復制CSS樣式,并粘貼到你網站的CSS文件中,但是我的方法是將 它重命名為font.css,并保持他作為一個單獨的CSS文件。你需要的時候在把這個CSS文件引入到你的HTML中。

    如何把你的圖標轉換成web字體
  7. 7、調用字體

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

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

    第二種方法使用一個span元素:

    這個方法是非常有用的,你的字符可以與文本在內聯中一起顯示。

  8. 8、先進的想法

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

    END

注意事項

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

日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔