IcoMoon 幫你把圖標轉換成 Web 字體

0
1898

很多設計師都有過這種經驗,為網站製作了一些優雅的圖標。在正常尺寸下,佈局看看上去一切 OK,但將頁面進行放大顯示,卻發現 icon 變得模糊不清,可是文字卻依舊清晰。而且在具備 Retina 顯示的 iPad 螢幕上,即使在沒有進行任何放大的情況下,這些圖標看上去都很模糊但文字卻不會。答案很明顯,我需要把我的圖標變成一個字體。

在這篇文章中,我們將教大家如何透過一個免費的網頁應用 IcoMoon將向量圖轉換成 Web 字體。然後在看看怎樣將產生出來的字體利用 CSS 來添加到 Web 頁面中。

建立圖標字體

想要建立圖標字體目前有許多專業的字體應用,像是 Glyphs等等,這些專業的排版工具有間距和粗細這樣的控制選項,對有需要的設計師才用的到。我們只需要一套簡單又快速的圖標字體。

目前為止,最簡單的方法是使用 Keyamoon 製作的一個 Web 應用程式 IcoMoon,可以解決字符轉換成 Web 字體的所有麻煩。

這個 Html5 應用解決了建立字體文件和如何使用圖標字體的一切麻煩。IcoMoon 附帶了大量的圖標,你也可以透過圖標庫來添加更多的圖標,其中大部分都可以免費使用(使用時可先參閱他們的授權許可)。如果你正在尋找如常用的「檔案下載」和「購物車」圖標,你會發現,使用標準的圖標比你自己建立要方便得多。

一步接一步

1、準備你的插圖

首先,你需要能建立向量圖標,並且能夠輸出 SVG 格式,比如透過「Illustrator」或者「iNkscape」。

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

IcoMoon01

2、整理

謹慎檢查每個圖標,以確保它沒有缺陷 – 小尺寸放大時可能隱藏些小瑕疵如下面圖標所示,我們需要刪除參差不齊的路徑。

在 Illustrator 中,使用路徑查尋工具合併重疊的元素,減去前面元素,例如這些圖標當中的星型圖標。

關鍵原則是確保你的圖標在小尺寸是可被讀取的,並儘可能的簡化。

IcoMoon02

3、輸出成 SVG

現在,選擇一個圖標,並將它複製並粘貼到一個新的文件場景中(例如 200px X 200px)。縮放圖標,使其大小適中。可以設置一個基準線,對製作多套圖標有相當的幫助。也可上色,如白色背景加上黑色圖標。對辨識有一定的幫助。

現在,選擇文件…另存為,然後將文件儲存為 SVG 檔案。使用預設的 SVG 設定。一旦圖標都完成後,你就可以開始建立 Web 字體了。

IcoMoon03

4、匯入 IcoMoon

打開 IcoMoon 網頁應用。要匯入圖標,點選「Imort icons」按鈕,然後選擇你想要添加的 SVG 檔案 – 你可以一次添加多個文件。這些將出現在「Your Custom Icons」自訂的圖標中。如果他們是高亮的黃色顯示,表示這些圖標是你將要創建的圖標字體。在這個例子中,你可以看到,我不僅匯出我自己建立的圖標,我還在「Mini-icons」中添加了別的圖標。

IcoMoon04

5、從 IcoMoon 中導匯出字體

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

當你都準備好了,點選螢幕底部的「Font」按鈕開始產生字體。這樣你就可以指定哪個圖標映射到哪個字符上,例如,如果你要設置一套六個旋轉的球,你可以每這六個球分別指定字符:Q、W、E、R、T 和 Y。你也可以根據你自己的喜好選擇字體的名稱。你也可以調整字體的指標,除非你要設定自定義的字體和標准文字,不然其實無過於擔心這些。

IcoMoon05

6、下載字體文件

點選「Download」下載字體包到你的電腦上。它包含字體本身(woff,eot,ttf 格式)以及一個 HTML 範例頁面和相應的CSS。甚至還有一個 javascript 文件和一個若要支持 IE 或 IE7 的解決方案。

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

<link rel="stylesheet" href="fonts.css"/>

在 CSS 文件中你可以找到 @font-face,你需要將URL路徑修改成你本地的相對路徑,或者你可以簡單地把字體文件和你的樣式放在同一個文件夾。

IcoMoon06

7、調用字體

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

<div aria-hidden="true" data-icon="g">

在這裡,fs1 類名用於設置字體的大小。這個「aria-hidden」屬性有助於確保字符能被螢幕閱讀器讀到。

第二種方法使用 span 元素:

<span aria-hidden="true"></span>

這個方法相當好用,你的字符可以和文字在內聯中一起顯示。

如果你想讓圖標具有鏈結功能,你可以將它放在一個鏈接中:

<a href="http://www.yoursite.com" data-icon="s"></a>

在這裡,我添加了一個 iconlink 類名,並設置了一個懸浮效果:

a .iconlink  {
   font-family : 'youriconfont' ;  
  text-decoration : none; 
  color : #666666 ; 
 }
 a .iconlink :hover  {
   text-decoration : none; 
  color : #999999 ; 
 }

IcoMoon07

8、更進一步的做法

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

嘗試看看吧,我保證你以後不會想再使用圖片的圖標了。