1、可以使用第三方字體編輯工具,如FontLab、FontCreator等;
2、可以使用第三方在線字體設計工具,如FontStruct、FontArk等;
3、可以使用字體設計軟件,如FontLabStudio、Fontographer等;
4、可以使用在線英文字體編輯工具,如FontForge、TypeDrawers等;
5、可以使用在線英文字體設計工具,如MyFonts、FontShop等;
6、還可以使用英文特殊字體工具,如Fontastic、Fontographer等,來修改英文字體。
連筆英文字體轉換器連筆英文字體轉換器為
網頁鏈接
(第壹字體網)。
只需輸入想要轉化的英文名字,然後點擊在線轉化,即可得到連筆英文字。
連筆簽名字體也叫壹筆簽名,它就是字與字之間,筆畫連接,結構貫通,以草書為基礎,壹根線條將所有筆畫完成。此種連筆個性簽名字體名稱為Cezanne,它是壹筆完成,會出現較多牽絲,但簽名有明顯的主線和次線之分,在書寫時,可能會有筆畫先後順序的變化,或者說可能會逆筆而行,這樣是為了運筆時更加流暢。
連筆英文簽名是壹款外語字體庫。本款字體是壹款手寫體風格的英文字體,類似於漢字草書,整體風格流暢、美觀,適用於英文書信及個性連筆英文簽名設計等場合。
如何制作自己的網頁字體圖標從設計單獨的圖標開始,到把它們轉化成@font-face格式以備嵌入,乃至授權給他人使用,整個過程中我們將僅使用免費軟件和在線服務。感覺怎麽樣呢?妳不必依托於任何深奧的知識就可以制作出壹套成功的英文字體(包括字母和數字),而只需要眼睛來設計——妳面對的可能是非常非常小的東西。
最終,妳將會收獲壹個制作設計元素的過程(方法),它的意義遠遠在制作出簡單的圖標之上。
在我們繼續之前,首先應該談談,究竟希望通過在設計中使用圖標達到什麽目的,又是什麽使得壹個圖標比下壹個更成功。先講理論再講應用。為了完成這個任務,我們必須思考圖標作為符號學的壹部分,所扮演的角色。
什麽是優秀的圖標?
符號學,從廣義上來說就是研究符號系統,我們如何對它們的形成和維護做出貢獻,它們亦因我們對世界的理解而受到影響。
不論何時,當妳從“它象征著什麽”——它向妳的觀眾傳達了什麽信息,或者它喚起了他們什麽概念——思考妳的某壹部分設計工作時,妳就是以符號學家的角度來審視妳的設計。符號學像其它語言學壹樣,的確可以覆蓋壹種語言,在壹個網站上面,有很多東西不是通過文字表達出來的,例如顏色、字體、形狀(圖標)。每個人都應該註意的是,這些東西所表達的都含有壹種很強的文化因素。在中國,紅色可以表示好運氣,而在很多西方國家,它卻意味著危險。
術語“icon”在符號學中有壹個特殊的意思。icon是壹個神器,通過相似表達某事物。例如,壹個標記地圖位置的icon。它擁有壹個類似真實的
地圖標記的形狀,因此它可以表示壹個位置,反過來,真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念,比如地點;也有不太抽象的概
念,比如這個位置可能在什麽地方。
壹些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標,壹個點和兩個同心圓弧段,沒有什麽比它更像ReallySimple
Syndication了。構成RSS圖標的形狀通過單獨約定具有象征意義,對此我們已經達成了***識。不過,壹個RSS圖標更適合被稱為RSS標誌。
現在,我希望我們已經確定了下面兩項成功的網站icon需要遵循的準則:
要有與真實事物的相似點,例如,壹個類似真實打印機的打印圖標。
妳的圖標在符號系統中應該是壹個熟悉的,可識別的標誌。
字體圖標日益受到歡迎
Icon字體,由於其提供了壹種圖標速記方式,長期以來被認為是壹種加強型UI設計,它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳,使用它可以使妳的設計更加亮麗、吸引更多用戶點擊。
與圖片相比,使用icon式字體是壹個相對新的主意。然而,與圖片(背景圖片方式)相比,它具備很多固有的優勢,因此它的吸引力正在逐漸增長。早在9月初,我在微博上寫了它的壹些好處,ChrisCoyier顯然也有類似的想法,幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容,我編寫了這個較為完整的特征列表:
它們的尺寸能夠輕松調整,並且不會損壞圖像質量(作為矢量圖);
給icon定義顏色和文本壹樣簡單。例如,對於壹個rss圖標,color:orange;
可以把許多icons排列在壹個組中,也就是壹個文件中,這樣只需要壹次http請求就可以了;
正如Chris所指出的,它們在IE6中也可以借著透明性顯示出形狀(這壹點與PNG圖片不同);
對於那些應該出現在文字附近的圖標,對齊方式和包裝都不是問題(因為它們是文本);
妳可以應用CSS3的text-shadow和background-clip:text效果,以便凸顯字型的形狀;
不像SVG,icon字體很容易實現跨瀏覽器兼容;
問題
Chris說過,使用icon字體是壹個不錯的主意,我要告訴妳。
盡管如此,icon字體的使用現狀並不理想。首先,壹些優質的可用字體,如Pictos,Fico,Klepto,Cheetos,Ponyo和SailorMoon都是收費的。實際上意味著真有兩個問題:
妳或許不得不投資壹部分錢。
無論妳是否需要花錢,妳將會被迫接受其他壹些人的糟糕設計。
除了自動抓取程序,我假定主要是網頁設計師將會閱讀這篇文章。我是壹個設計師,我不認為只有我壹個討厭依靠別人的作品,使自己的設計思路大打折扣這
種事兒。當然,我更不喜歡那種有支付權限的想法。我知道自己要使用什麽圖標,並且我知道如何才能使其適合我的整體設計。我想要那種控制力。
經過壹些搜索,我想介紹壹下Inkscape的svg字體編輯器。通過使用Inkscape和壹款在線轉換器(SVG字體到TTF),我制作出了字體“Heyding”,這個字體在Simurai’slist(由Coyier的文章鏈接到)中有介紹。我不打算將自己的字體賣給妳(它是免費的),但是我想它會帶給妳壹個非常好的概念。
使用Inkscape制作icon字型
啟動Inkscape
我們先從下載和安裝Inkscape開始。妳也應該使用我的icon字體啟動器模板,它們被放在這個GitHub倉庫的資源文件夾裏(以後這個項目中還會有更多)。壹旦妳在Inkscape中打開了這個文件,妳應該通過在主菜單中打開以下窗口來設置好妳的工作空間:
OBJECT→FILLANDSTROKE
OBJECT→ALIGNANDDISTRIBUTE
TEXT→SVGFONTEDITOR
在SVG字體編輯面板中,點擊“Font”下的“Font1”。現在,妳的工作空間看起來應該有點兒像這個截圖:
值得指出的是,baseline不是在畫布的下邊界之下:如果妳希望與相鄰的字體***享同壹條基線,妳的圖標應該很輕微地懸在畫布的底部。我已經用Georgia,Arial和壹些網頁字體進行了測試。
制作妳的第壹個字型
為定義字型,點擊SVG字體編輯面板中的“Glyphs”選項卡,然後點擊面板下方的“Add
Glyh”按鈕。壹開始妳可能不太清楚,但如果妳在妳的字形(“字型1”)上點擊,壹個字段將會顯示出來,它要求妳輸入妳需要的圖標對應的字符。我們首先
要做壹個簡單的星形,所以我建議妳輸入的字符“s”,“S”或“*”:
現在我們已經定義了字型對應的字符,我們需要制作字型本身。由於這次我們僅僅要制作壹個星星,我們應該從Inkscape左邊的工具欄中選擇有用的
StarsandPolygonstool
,然後,在畫布上繪制壹個星星。妳會發現,這個工具自帶的選項允許您更改星星的外觀。在我的例子中,選擇了角數為5,spoke
ratio為0.5,roundedvalue為0.1。
使用AlignandDistributepanel(可能在SVGFontEditor下面隱藏著)使星星橫向居中,然後鄉下拖動形狀使觸及基線。關閉網格顯示之後,畫布看起來應該像這樣子:
在我們的icon字體中,字型只是形狀,沒有顏色、層級或者漸變的形狀。因此,為了使我們的星星成為壹個合格的字體候選者,我們必須將它由壹個對象
轉化成基於路徑的圖形。妳可以通過在主按鈕上選擇星星,然後是PATH→OBJECTTO
PATH來完成這壹任務。現在,選擇了星星之後,我們可以在SVGFontEditor中,高亮顯示可用的“s”字型,然後點擊Get
curvesfromselection按鈕:
當妳在SampleText區域輸入“s”時,妳的星星應該被預覽出來,如下所示:
制作更加復雜的icon
妳已經制作出了第壹個可擴展的SVG字體字型。通過使用Filland
Stroke面板上的選項:編輯路徑節點,以及合並對象和筆畫,能夠使妳做出更加不凡的icon設計。由於我們還有很多要講,我不想深入完成壹個完整的
Inkscape教程,但是遵循下面的簡單規則會給妳帶來好處:
堅持使用黑色筆畫和填充,只是為了提醒妳:那些icon僅僅是形狀,而非復雜的矢量圖。為icon上色這件工作,我們會在最終產品中使用CSS來完成。
所有對象和筆畫(線條)必須被轉化成路徑(不管使用PATH→OBJECTTOPATH或者PATH→STROKETOPATH)
當有多個對象和/或筆畫被用來完成壹個icon字型時,它們應該被合並起來(使用PATH→COMBINE或者,在某些情況下,使用PATH→UNION)
為了在已有的形狀上剪切出想要的形狀,將形狀放置在主形狀上面,選擇兩個形狀,然後選擇PATH→DIFFERENCE。點擊Getcurvesfromselection,黑色塊上面的白色區域剔除之後就是妳要的形狀。
準備嵌入妳的字體
假如妳已經重復了很多次我剛才所描述的方法,創建了壹些有用的圖標,並且,字體文件被保存為。現在,妳將要準備好把這個圖標庫用於網頁中。
把SVG轉化成TTF
妳應該采取的第壹項措施是,將SVG字體格式轉換成壹個更熟悉、更通用的格式。TTF是壹種用於本地安裝的卓越格式。同時,它還為再轉化成@font-face提供了壹個良好的基礎。可以進行字體轉換的在線服務包括:
,
和
。然而,我個人最喜歡的,是
,因為我不會排隊,也從來沒看到它產生什麽故障。
我想,不需要向妳介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳字段,select元素和巨大的轉換按鈕會讓妳迅速抓住重點,真的。
編輯字體信息
既然妳已經獲得了壹個TTF,我推薦妳現在編輯產生的元數據。對字體進行重命名、添加屬性和描述,使它準備好被安裝、嵌入和分發。這也是壹種聲明字體為妳所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的MicrosoftFontPropertiesEditor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶,我希望得到妳們更好的意見。
重要提示:雖然MicrosoftFontProperties
Editor允許您添加作者,描述和許可信息,它似乎並沒有讓妳編輯字體名稱、附言名稱等基本數據。這些字段是被禁用的。如果妳想使用這些特殊的功能,妳
需要在SVG轉換為TTF之前,在SVG代碼中編輯禁止的值。在妳喜歡的文本編輯器(我用Notepad++)中打開原始的SVG,並編輯以下內容:
FontName:標簽中可以尋找到,font-family屬性
PostscriptName:標簽中可以尋找到,id屬性
Description:妳應該在這個標簽中添加壹個描述(作者、許可等)。請註意這與TTF描述文字是不同的,轉換過程中將不會被保留;妳還需要為TTF添加單獨的描述信息。
嵌入字體
壹旦妳在本地系統中安裝了TTF,並且已經預覽過,確定沒有出現意外狀況,妳就可以在FontSquirrel的@font-facegenerator中運行它了。為了使輸出代碼的效率和效果盡量好,這裏有幾個專家模式中的選項值得壹提:
Subsetting:該選項允許您只運行需要的字符集(包括字符編碼、類型、語言等選項),減少文件大小。
Removekerning:您的圖標將幾乎總是單獨出現,所以字距是沒有必要的。據稱,這也將減小文件大小。
WebOnly:如果妳希望您的字體僅僅用於web中,而非桌面-妳可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。
發布字體
如果妳有興趣發布妳的字體,給它添加許可是壹個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們制作圖標時使用的是免費、開源的軟件,發布時也不妨這樣做。
目前,有很多可用的授權選項,而逐壹調查研究它們有時是令人費解的壹件事。GNUGeneralPublicLicense是完全可以接受的,但妳可能要考慮SILOpenFontLicense。使用這種許可證的主要優點是,reservedfontname:即允許其他設計師修改字體,但他們需要用不同的名字。在實踐中,這意味著,對圖標設計的壹些不良行為不能以“妳的名字”來進行。
有了這兩種許可,妳還應該在壹個文本文件中保存版本信息,同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明,請訪問各自的許可證頁面(上面的鏈接)。
CSSspriting的終結者
為什麽要停下使用SVG字體做通用圖標的腳步?有了做圖標的能力,也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這壹點像CSS
sprities,所有這些視覺元素都可以保存在壹個文件中,減少了服務器調用http請求的次數;不過,icon字體的元素都可以調整大小,而不必依賴
於位置坐標(背景位置值)才能正確顯示。這使它們更適合於responsivedesign。
讓我們假裝要選擇使用壹個SVG字體去代替壹些我的steampunk般的blog裏基本的設計元素。組件設計的壹個簡單的HTML表格呈現會是這個樣子:
關於這種方式,最好的事情就是通用性。舉例來說,從左邊的第二個齒輪形狀既可作為壹個微小的圓點設計,又可以是壹個巨大而抽象的背景裝飾。著色很簡
單:color:maroon,但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓妳壹開始有所啟發,查看thisexcellentgalleryofCSS3-enhancedwebfonts。
關於屏幕閱讀器的快速筆記
以這種方式使用字體來顯示視覺元素的壹個問題是,在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪,箭頭之類的圖標,但是屏幕閱讀器將堅持讀出指定這些設計的字符。對於使用裝飾性的SVG字體元素,我建議聽取Coyier的建議:為Unicode的SupplementaryPrivateUseArea分配向量。這樣的符號不應該由讀者來讀出。
壹個協作式iconweb字體
作為我的JavaScript導師,Rupert,有壹天向我指出,使用SVG字體來創建圖標集為合作提供了壹個有趣的機會。妳看,SVG的代碼-XML的壹種形式-是高度標準化而且輕松可讀的。正是源碼的順序讓我覺得,icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。
這個想法契合了我想要的符號含義:如果壹個圖標是由很多人協商之後壹致確定的,那麽它的形成過程中也存在壹定的“***識”。通過我們的圖標標識系統設計出來的,壹定是最典型的圖標。我們應該創建壹種屬於社區的icon詞匯,並且它對於需要的人來說是有意義的。
為了發展這個想法,我創建了壹個公開的GitHub倉庫CommunityIconFont,這個倉庫的文件結構並不復雜:仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為妳解答所有的疑惑。如果妳是GitHub的新成員,嘗試閱讀它們的幫助頁面,或者問問妳附近的技術人員(我正是這樣做的)。