免費程式IcoMoon:把向量圖轉換成Web字型

來源:互聯網
上載者:User

文章描述:在這篇教程中,我們將看看如何使用一個免費的Web應用程式IcoMoon將向量圖轉換成Web字型。然後在看看如何使用產生的字型通過css應用到Web頁面中。

我已經製為網站製作了一些優雅的表徵圖,並且在新的網站和老的iPad上進行了測試。正常尺寸下,布局看看上去一切OK,但的將頁面進行放大顯示,我卻發現我的icon變得模糊不清,但是基於文本的標題依然清晰可見。在具有Retina顯屏的iPad上,這些表徵圖看上去都不清晰,即使在沒有進行任何放大的情況之下。

我第一想法就是建立雙倍大小的Sprite圖,然後通過css樣式,設定他們只顯示二分之一尺寸。雖然這樣的方法讓他們在Retina屏上顯示的大小是正常的,一旦你開始放大螢幕,表徵圖又變得模糊不清。但文本還是一樣的清晰。

答案很明顯,我需要把我的表徵圖變成一個字型。

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

使用字型表徵圖的優勢

字型表徵圖除了映像清晰度之外,比位元影像還有哪些優勢呢。

  • 適用性:一個表徵圖字型比一系列的映像(特別是在Retina屏中使用雙倍大小的映像)要小。一旦表徵圖字型載入了,你的表徵圖就會馬上渲染出來,不需要下載一個映像。
  • 可擴充性:表徵圖字型可以用過font-size屬性設定其任何大小。這使您能夠隨時輸出不同大小的表徵圖,然而,使用位元影像,你必須得為每個不同大小的映像輸出一個不同檔案。
  • 靈活性:文字效果可以很容易地應用到你的表徵圖上,包括顏色,陰影和翻轉等效果。他們還可以在任何背景下顯示。
  • 相容性:網頁字型支援所有現代瀏覽器,包括IE低版本。詳細相容性可以點擊這裡。

我們開始吧!

建立一個表徵圖字型

Symbol字型可以使用一個專用的字型建立應用程式,比如說Glyphs,但是一個專業的排版工具之外的需求或要求構建一個簡單的表徵圖字型,比如說間距和粗細這樣的物理關係並不是非常重要。

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

這個Html5應用程式解決了建立字型檔和如何使用建立的表徵圖字型的一切麻煩。IcoMoon附帶了大量的表徵圖,你也可以通過表徵圖庫添加更多的表徵圖,其中大部分都可以免費使用(使用時請先查看他們的許可證)。如果你正在尋找如“檔案下載”和“購物車”一樣的表徵圖,那麼你會發現,使用標準的表徵圖比你自己建立的要方便得多。

一步一步

1、準備你的插圖

首先,你需要能建立向量表徵圖的程式,並且能夠找到輸出SVG格式,比如“Illustrator”或者“iNkscape”。

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

2、清理

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

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

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

3、導成svg

現在,選擇一個表徵圖,並將它複製粘貼到一個新的文檔情境中(例如200px X 200px)。縮放也是符合。你可能會發現它有一個基準尺寸的設定。使用彩色的表徵圖,比如說在白色的背景中使用黑色的表徵圖。

現在,選擇菜單“檔案”中“儲存”,並選擇將檔案儲存成“SVG”格式。使用預設的SVG設定。一旦你這樣做,所有的表徵圖,你可以建立一個Web字型。

4、匯入到IcoMoon

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

5、從IcoMoon中匯出字型

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

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

 

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路徑修改成你本地的相對路徑,或者你可以簡單地把字型檔和你的樣式放在同一個檔案夾。

7、調用字型

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

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

在這裡,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; }

8、先進的想法

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

嘗試它,我保證你永遠不會再次使用位元影像表徵圖。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。