製做本身的網絡字體

如何製做本身的網頁字體圖標

做者：大漠 日期：2014-03-10 點擊：20



本文由韓聰根據Heydon Pickering的《How to make your own icon webfont》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont，以及做者相關信息。

——做者：Heydon Pickering

——譯者：韓聰

本篇文章中，在教你如何製做屬於你本身的可嵌入圖標式字體以前，首先想研究一下製做一套成功的UI圖標須要的工具。

從設計單獨的圖標開始，到把它們轉化成@font-face格式以備嵌入，乃至受權給他人使用，整個過程當中咱們將僅使用免費軟件和在線服務。感受怎麼樣呢？你沒必要依託於任何深奧的知識就能夠製做出一套成功的英文字體（包括字母和數字），而只須要眼睛來設計——你面對的多是很是很是小的東西。

最終，你將會收穫一個製做設計元素的過程（方法），它的意義遠遠在製做出簡單的圖標之上。

在咱們繼續以前，首先應該談談，究竟但願經過在設計中使用圖標達到什麼目的，又是什麼使得一個圖標比下一個更成功。先講理論再講應用。爲了完成這個任務，咱們必須思考圖標做爲符號學的一部分，所扮演的角色。

什麼是優秀的圖標？

符號學，從廣義上來講就是研究符號系統，咱們如何對它們的造成和維護作出貢獻，它們亦因咱們對世界的理解而受到影響。

不論什麼時候，當你從「它象徵着什麼」—— 它向你的觀衆傳達了什麼信息，或者它喚起了他們什麼概念——思考你的某一部分設計工做時，你就是以符號學家的角度來審視你的設計。符號學像其它語言學同樣，的確能夠覆蓋一種語言，在一個網站上面，有不少東西不是經過文字表達出來的，例如顏色、字體、形狀（圖標）。每一個人都應該注意的是，這些東西所表達的都含有一種很強的文化因素。在中國，紅色能夠表示好運氣，而在不少西方國家，它卻意味着危險。

圖片由Ell Brown提供。

術語「icon」在符號學中有一個特殊的意思。icon是一個神器，經過類似表達某事物。例如，一個標記地圖位置的icon。它擁有一個相似真實的地圖標記的形狀,所以它能夠表示一個位置，反過來，真正的地圖位置標記令人們想起各類有意義的概念。其中這些有抽象的概念，好比地點；也有不太抽象的概念，好比這個位置可能在什麼地方。

一些所謂的圖標並不具備真正意義的表明性。無處不在的RSS圖標，一個點和兩個同心圓弧段，沒有什麼比它更像Really Simple Syndication 了。構成RSS圖標的形狀經過單獨約定具備象徵意義，對此咱們已經達成了共識。不過，一個RSS圖標更適合被稱爲RSS標誌。

如今，我但願咱們已經肯定了下面兩項成功的網站icon須要遵循的準則：

• 要有與真實事物的類似點，例如，一個相似真實打印機的打印圖標。

• 你的圖標在符號系統中應該是一個熟悉的，可識別的標誌。

字體圖標日益受到歡迎

Icon字體，因爲其提供了一種圖標速記方式，長期以來被認爲是一種增強型UI設計，它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳，使用它可使你的設計更加亮麗、吸引更多用戶點擊。

與圖片相比，使用icon式字體是一個相對新的主意。然而，與圖片（背景圖片方式）相比，它具有不少固有的優點，所以它的吸引力正在逐漸增加。早在9月初，我在微博上寫了它的一些好處，Chris Coyier顯然也有相似的想法，幾周以後也向更多觀衆介紹了它。基於以上兩篇文章和其它內容，我編寫了這個較爲完整的特徵列表：

1. 它們的尺寸可以輕鬆調整，而且不會損壞圖像質量（做爲矢量圖）；

2. 給icon定義顏色和文本同樣簡單。例如，對於一個rss圖標，color:orange；

3. 能夠把許多icons排列在一個組中，也就是一個文件中，這樣只須要一次http請求就能夠了;

4. 正如Chris所指出的，它們在IE6中也能夠藉着透明性顯示出形狀（這一點 與PNG圖片不一樣）;

5. 對於那些應該出如今文字附近的圖標，對齊方式和包裝都不是問題（由於它們是文本）;

6. 你能夠應用CSS3的text-shadow和background-clip:text效果，以便凸顯字型的形狀;

7. 不像SVG，icon字體很容易實現跨瀏覽器兼容；

問題

Chris說過，使用icon字體是一個不錯的主意，我要告訴你。

儘管如此，icon字體的使用現狀並不理想。首先，一些優質的可用字體，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味着真有兩個問題：

1. 你或許不得不投資一部分錢。

2. 不管你是否須要花錢，你將會被迫接受其餘一些人的糟糕設計。

除了自動抓取程序，我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師，我不認爲只有我一個討厭依靠別人的做品，使本身的設計思路大打折扣這種事兒。固然，我更不喜歡那種有支付權限的想法。我知道本身要使用什麼圖標，而且我知道如何才能使其適合個人總體設計。我想要那種控制力。

通過一些搜索，我想介紹一下Inkscape的svg字體編輯器。經過使用Inkscape和一款在線轉換器（SVG字體到TTF），我製做出了字體「Heyding」，這個字體在 Simurai’s list（由Coyier的文章連接到）中有介紹。我不打算將本身的字體賣給你（它是免費的），可是我想它會帶給你一個很是好的概念。

使用Inkscape製做icon字型

啓動Inkscape

咱們先從下載和安裝Inkscape開始。你也應該使用個人icon字體啓動器模板，它們被放在這個GitHub倉庫的資源文件夾裏（之後這個項目中還會有更多）。一旦你在Inkscape中打開了這個文件，你應該經過在主菜單中打開如下窗口來設置好你的工做空間：

• OBJECT → FILL AND STROKE

• OBJECT → ALIGN AND DISTRIBUTE

• TEXT → SVG FONT EDITOR

在SVG字體編輯面板中，點擊「Font」下的「Font1」。如今，你的工做空間看起來應該有點兒像這個截圖：

值得指出的是， baseline不是在畫布的下邊界之下：若是你但願與相鄰的字體共享同一條基線，你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia，Arial和一些網頁字體進行了測試。

製做你的第一個字型

爲定義字型，點擊SVG字體編輯面板中的「Glyphs」選項卡，而後點擊面板下方的「Add Glyh」按鈕。一開始你可能不太清楚，但若是你在你的字形（「字型1」）上點擊，一個字段將會顯示出來，它要求你輸入你須要的圖標對應的字符。咱們首先要作一個簡單的星形，因此我建議你輸入的字符「s」，「S」或「*」：

如今咱們已經定義了字型對應的字符，咱們須要製做字型自己。因爲此次咱們僅僅要製做一個星星，咱們應該從Inkscape左邊的工具欄中選擇有用的Stars and Polygons tool ，而後，在畫布上繪製一個星星。你會發現，這個工具自帶的選項容許您更改星星的外觀。在個人例子中，選擇了角數爲5，spoke ratio爲0.5，rounded value爲0.1。

使用Align and Distribute panel（可能在SVG Font Editor下面隱藏着）使星星橫向居中，而後鄉下拖動形狀使觸及基線。關閉網格顯示以後，畫布看起來應該像這樣子：

在咱們的icon字體中，字型只是形狀，沒有顏色、層級或者漸變的形狀。所以，爲了使咱們的星星成爲一個合格的字體候選者，咱們必須將它由一個對象轉化成基於路徑的圖形。你能夠經過在主按鈕上選擇星星，而後是PATH → OBJECT TO PATH來完成這一任務。如今，選擇了星星以後，咱們能夠在SVG Font Editor 中，高亮顯示可用的「s」字型，而後點擊 Get curves from selection按鈕：

當你在Sample Text 區域輸入「s」時，你的星星應該被預覽出來，以下所示：

製做更加複雜的icon

你已經制做出了第一個可擴展的SVG字體字型。經過使用Fill and Stroke面板上的選項：編輯路徑節點，以及合併對象和筆畫，可以使你作出更加不凡的icon設計。因爲咱們還有不少要講，我不想深刻完成一個完整的Inkscape教程，可是遵循下面的簡單規則會給你帶來好處：

• 堅持使用黑色筆畫和填充，只是爲了提醒你：那些icon僅僅是形狀，而非複雜的矢量圖。爲icon上色這件工做，咱們會在最終產品中使用CSS來完成。

• 全部對象和筆畫（線條）必須被轉化成路徑（無論使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）

• 當有多個對象和/或筆畫被用來完成一個icon字型時，它們應該被合併起來（使用PATH → COMBINE 或者，在某些狀況下，使用 PATH → UNION）

• 爲了在已有的形狀上剪切出想要的形狀，將形狀放置在主形狀上面，選擇兩個形狀，而後選擇 PATH → DIFFERENCE。點擊Get curves from selection ，黑色塊上面的白色區域剔除以後就是你要的形狀。

準備嵌入你的字體

假如你已經重複了不少次我剛纔所描述的方法，建立了一些有用的圖標，而且，字體文件被保存爲myicons.svg。如今，你將要準備好把這個圖標庫用於網頁中。

把SVG轉化成TTF

你應該採起的第一項措施是，將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時，它還爲再轉化成@font-face提供了一個良好的基礎。能夠進行字體轉換的在線服務包括：http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我我的最喜歡的，是http://www.freefontconverter.com，由於我不會排隊，也歷來沒看到它產生什麼故障。

我想，不須要向你介紹如何使用這個資源也足以顯示個人誠意了。醒目的文件上傳字段，select元素和巨大的轉換按鈕會讓你迅速抓住重點，真的。

編輯字體信息

既然你已經得到了一個TTF，我推薦你如今編輯產生的元數據。對字體進行重命名、添加屬性和描述，使它準備好被安裝、嵌入和分發。這也是一種聲明字體爲你所創造的途徑。運行Windows的讀者能夠選擇使用貌似很霸氣的Microsoft Font Properties Editor或者容許無償使用X天的Typograf。對於蘋果和Linux用戶，我但願獲得大家更好的意見。

重要提示：雖然Microsoft Font Properties Editor容許您添加做者，描述和許可信息，它彷佛並無讓你編輯字體名稱、附言名稱等基本數據。這些字段是被禁用的。若是你想使用這些特殊的功能，你須要在SVG轉換爲TTF以前，在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器（我用Notepad++）中打開原始的SVG，並編輯如下內容：

• Font Name:標籤中能夠尋找到, font-family 屬性

• Postscript Name:標籤中能夠尋找到, id屬性

• Description:你應該在這個標籤中添加一個描述（做者、許可等）。請注意這與TTF描述文字是不一樣的，轉換過程當中將不會被保留；你還須要爲TTF添加單獨的描述信息。

嵌入字體

一旦你在本地系統中安裝了TTF，而且已經預覽過，肯定沒有出現意外情況，你就能夠在Font Squirrel的 @font-face generator中運行它了。爲了使輸出代碼的效率和效果儘可能好，這裏有幾個專家模式中的選項值得一提：

Subsetting：該選項容許您只運行須要的字符集（包括字符編碼、類型、語言等選項），減小文件大小。

Remove kerning:您的圖標將幾乎老是單獨出現，因此字距是沒有必要的。據稱，這也將減少文件大小。

WebOnly™:若是你但願您的字體僅僅用於web中，而非桌面- 你能夠選擇此選項。它也能夠更好地知足您的受權計劃。如今我將介紹許可證。

發佈字體

若是你有興趣發佈你的字體，給它添加許但是一個比較好的作法。不然許多字體網站將不會帶它玩兒。因爲咱們製做圖標時使用的是免費、開源的軟件，發佈時也不妨這樣作。

目前，有不少可用的受權選項，而逐一調查研究它們有時是使人費解的一件事。 GNU General Public License是徹底能夠接受的，但你可能要考慮SIL Open Font License。使用這種許可證的主要優勢是，reserved font name：即容許其餘設計師修改字體，但他們須要用不一樣的名字。在實踐中，這意味着，對圖標設計的一些不良行爲不能以「你的名字」來進行。

有了這兩種許可，你還應該在一個文本文件中保存版本信息，同時在字體的元信息中插入版權聲明和完整許可的URL連接。若是須要更具體的說明，請訪問各自的許可證頁面（上面的連接）。

CSS spriting的終結者

爲何要停下使用SVG字體作通用圖標的腳步？有了作圖標的能力，也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS sprities，全部這些視覺元素均可以保存在一個文件中，減小了服務器調用http請求的次數；不過，icon字體的元素均可以調整大小，而沒必要依賴於位置座標（背景位置值）才能正確顯示。這使它們更適合於 responsive design。

讓咱們僞裝要選擇使用一個SVG字體去代替一些個人steampunk般的blog裏基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子：

關於這種方式，最好的事情就是通用性。舉例來講，從左邊的第二個齒輪形狀既可做爲一個微小的圓點設計，又能夠是一個巨大而抽象的背景裝飾。着色很簡單：color:maroon，但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來能夠爲它添加紋理和觸感。爲了讓你一開始有所啓發，查看this excellent gallery of CSS3-enhanced webfonts。

關於屏幕閱讀器的快速筆記

以這種方式使用字體來顯示視覺元素的一個問題是，在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪，箭頭之類的圖標，可是屏幕閱讀器將堅持讀出指定這些設計的字符。對於使用裝飾性的SVG字體元素，我建議聽取Coyier的建議：爲Unicode的Supplementary Private Use Area分配向量。這樣的符號不該該由讀者來讀出。

一個協做式icon web字體

做爲個人JavaScript導師，Rupert，有一天向我指出，使用SVG字體來建立圖標集爲合做提供了一個有趣的機會。你看，SVG的代碼 - XML的一種形式 - 是高度標準化並且輕鬆可讀的。正是源碼的順序讓我以爲，icon字體的開發很適合選擇像GitHub這樣的協做編碼服務。

這個想法契合了我想要的符號含義：若是一個圖標是由不少人協商以後一致肯定的，那麼它的造成過程當中也存在必定的「共識」。經過咱們的圖標標識系統設計出來的，必定是最典型的圖標。咱們應該建立一種屬於社區的icon詞彙，而且它對於須要的人來講是有意義的。

爲了發展這個想法，我建立了一個公開的GitHub倉庫Community Icon Font，這個倉庫的文件結構並不複雜：仔細閱讀上面的Inkscape教程和項目主頁的內容應該能夠爲你解答全部的疑惑。若是你是GitHub的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣作的）。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！