响应式网页字体图标
響應(yīng)式設(shè)計(jì)中主要面對的問題之一是如何縮放圖標(biāo)來適應(yīng)用戶界面,不僅僅是針對于物理尺寸,而且還需要根據(jù)屏幕的尺寸和每英寸的像素比例來顯示。一般情況之下,都是通過內(nèi)聯(lián)塊元素<img>標(biāo)簽來添加圖標(biāo)。另一種常見的技術(shù)是依賴于網(wǎng)格圖標(biāo)和狀態(tài)——CSS Sprites,并將其保存為.gif或.png文件。
然而,更糟糕的是圖片根據(jù)響應(yīng)式內(nèi)容不斷的放大,對于位圖圖像會產(chǎn)生鋸齒,而且會越明顯。更糟糕的是,CSSSprites(雪碧圖)制作的圖標(biāo)更無法輕意的縮放。
在固定尺寸之時,圖標(biāo)看起來很好,但放大,哪怕稍為放大一點(diǎn)點(diǎn),邊緣都會有鋸齒,而且看起來模糊。我想這也是很多設(shè)計(jì)師和開發(fā)人員盡量避免在設(shè)計(jì)中使用圖標(biāo)的原因,盡管在設(shè)計(jì)中使用圖標(biāo)在有限的空間中展示更好的想法,并且能達(dá)到令人意想不到的效果。
要創(chuàng)建響應(yīng)式設(shè)計(jì)和可縮放的圖標(biāo),我建議使用基于網(wǎng)頁字體制作的矢量圖標(biāo)來替換位圖圖像。使用矢量圖可以無限制的放大,而無需擔(dān)心圖像會失真。在本文中,我將向大家介紹網(wǎng)頁字體制作圖標(biāo)來替換你設(shè)計(jì)中的位圖圖標(biāo),以提高可訪問性,可擴(kuò)展性,風(fēng)格各異的圖標(biāo)。
為什么選擇網(wǎng)頁字體
網(wǎng)頁字體的工作原理就像在你的文檔中使用其他文件來創(chuàng)建的設(shè)計(jì):你只需要將文件上傳到你的服務(wù)器上,那么你的網(wǎng)頁就可以下載這些文件,讓他們能運(yùn)行。但是,我們通常認(rèn)為網(wǎng)頁字體只是可讀文件,它們用來顯示我們設(shè)計(jì)中的圖標(biāo)的丁巴特(dingbat)字符。技巧很簡單,目前所有瀏覽器都支持。使用網(wǎng)頁字體制作圖標(biāo)具有以下三大優(yōu)勢:
- 易于渲染:網(wǎng)頁字體圖標(biāo)可以用HTML文本的任何地方。為了屏幕閱讀器能讀到和易于搜索引擎,關(guān)鍵之處可以使用CSS制作圖標(biāo)替換文,向用戶隱藏文本。
- 可擴(kuò)展性:因?yàn)樗麄兪褂玫氖鞘噶?#xff0c;而不是位圖渲染,圖標(biāo)可以縮小或放大,盡可能的放大也不會失真。這可以使你根據(jù)用戶界面創(chuàng)造出更適合響應(yīng)式設(shè)計(jì)中的圖標(biāo)。
- 易于美化:可以在重新設(shè)計(jì)圖標(biāo)的地方使用CSS,而不需要每次為了更新而重新創(chuàng)建圖像。這也就是說,你可以使用CSS字體等樣式來美化你的圖標(biāo),不僅讓這些圖標(biāo)好看,而且可以隨里根據(jù)設(shè)計(jì)需求的變化來隨機(jī)修改。
網(wǎng)頁字體制作的圖標(biāo)放大也不會失真。
如何用網(wǎng)頁字體制作圖標(biāo)
網(wǎng)頁字體制作圖標(biāo)的原理是,通過CSS的content屬性給HTML元素添加圖標(biāo)對應(yīng)的字符。然后通過@font-face加載制作圖標(biāo)的的字體,這樣注入的字符就會變成所需的圖標(biāo)。首先,你需要制作圖標(biāo)的網(wǎng)頁圖標(biāo)字體,然后用特定的ASCII字符(如A,B,C,!,@,#等)或者自定義的Unicode編碼區(qū)域來對應(yīng)不同的圖標(biāo)。不過在這個圖標(biāo)區(qū)域內(nèi),將不能在使用特殊的Unicode字符。一旦你有了你的字體文件——Entypo字體是一個好的開始,你準(zhǔn)備好了嗎?
Entypo字體是一個免費(fèi)的網(wǎng)頁字體。
步驟1:加載字體文件
首先使用CSS的@font-face規(guī)則(確保你已將字體文件上傳到了服務(wù)器上)定義字體圖標(biāo)文件的路徑:
確保你的字體來源包括了TrueType, EOT和WOFF字體格式,還需要包括SVG字體格式。雖然SVG正在快速的被WOFF格式替代,但為了兼容老的iOS設(shè)備,還是需要提供的。
有關(guān)于如何使用@font-face加載字體,和各種字體所對應(yīng)的作用,要是您感興趣,可以閱讀《CSS3 @font-face》一文——@大漠。
步驟2:給放置圖標(biāo)的帶有icon-的標(biāo)簽容器創(chuàng)建CSS樣式
這個選擇器允許你為標(biāo)簽定義了icon-字符串的容器插入圖標(biāo):
?[class*="icon-"]是一個屬性選擇器,表達(dá)的意思是“只要定義的類名中包含了icon-就會被選擇中”。
我們還需要為我們的圖標(biāo)設(shè)置字號font-size,寬度width和高度height的大小為1em。我們使用的是一個相對值,這樣方便于擴(kuò)展。同時也清除了字體的加粗和斜體樣式,如果你應(yīng)用了,會使圖標(biāo)扭曲。
步驟3:通過偽類選擇器創(chuàng)建放置圖標(biāo)的地方
技巧來了,我們使用CSS的content屬性給偽元素添加字符,然后調(diào)用第一步設(shè)置的字體:
這里將使用content屬性添加了一個默認(rèn)的字符“+”號,使用::before給標(biāo)簽前面一個占位符。此外添加Webkit的font-smoothing屬性,是一個好辦法,可以讓圖標(biāo)更平滑。不過這個屬性還不是標(biāo)準(zhǔn)屬性,使用的時候需要添加前端-webkit。
步驟4:創(chuàng)建一個選擇器來隱藏圖標(biāo)標(biāo)簽中的內(nèi)容
你可以創(chuàng)建一個hide類,用來隱藏你想隱藏的文本,包括SEO和向后兼容的任何文本。然后在實(shí)際使用圖標(biāo)的標(biāo)簽上調(diào)用這個類名。
步驟5:給圖標(biāo)添加指定字符創(chuàng)建CSS
最終通過CSS選擇器給實(shí)際圖標(biāo)使用指定的字符來替代content中的默認(rèn)字符+。比如這個示例,使用字母t來制作“twitter”圖標(biāo)。
理論上你也可以使用::after來代替::before,但理論上帶有文本的圖標(biāo),一般圖標(biāo)都是放在文本的前面。或者你在創(chuàng)建私人的網(wǎng)頁圖標(biāo)字體,你也可以使用“Unicode”字符,在content屬性中調(diào)用你私人的“Unicode”字符生成圖標(biāo):
上面的代碼生成“twitter”圖標(biāo)是相同的效果,但是,由于某種原因,CSS沒有加載,那么顯示圖標(biāo)的地方會顯式成一個空格,而不是顯示“t”字母來替代圖標(biāo)。
步驟6:添加你的HTML
現(xiàn)在是時候?yàn)轱@示圖標(biāo)添加所需的HTML代碼。
我在這個例子中使用的是<i>和<span>標(biāo)簽,在這里不需要考慮具體的語義,所以他是安全的。這也是通常使用的一種方式。下面我們來看一個典型的例子,頁腳的社交媒體圖標(biāo),我們可能會這樣寫HTML代碼:
也可以用下面的結(jié)構(gòu)來替代:
通常大家會認(rèn)為上面這樣的結(jié)構(gòu)不合理,用a標(biāo)簽來嵌套li標(biāo)簽。我個人更趨向使用下面這樣的結(jié)構(gòu)來替代:
然后根據(jù)需求添加需要的樣式。有一件事情,網(wǎng)頁字體這種技術(shù)不能制作多顏色的圖標(biāo)。也就是說這些圖標(biāo)都將是一種顏色。
有關(guān)于使用網(wǎng)頁字體制作多顏色的圖標(biāo),并不是無法實(shí)現(xiàn),只是會更為復(fù)雜一些,在互聯(lián)網(wǎng)上已經(jīng)有這方面的教程。比如說Forecast Font就是一個成功的案例,使用字體圖標(biāo)制作了一套彩色的天氣圖標(biāo)。相關(guān)的教程,如果你感興趣的話可以點(diǎn)擊PoseLab的《Use of @font-face to make icons with different colors》 、nikolaswise的《Three Color, Semantic Icon Fonts》、Tomas Mulder的《How to Create Multi-Colored Icon Fonts for Responsive Web Design》等。nikolaswise還寫了一個示例——@大漠
想玩代碼?請?jiān)L問Jason CranfordTeague在CodePen寫的示例Styling Webfont Icons。點(diǎn)擊“CSS”選項(xiàng)卡,然后嘗試修改body選擇器中的font-size屬性值。這圖標(biāo)可以放大和縮小,而且永遠(yuǎn)不會失真。
修飾網(wǎng)頁字體圖標(biāo)
一旦創(chuàng)建好了,可以使用CSS樣式或者CSS的偽類,如:hover、:active和:focus來修飾網(wǎng)頁字體圖標(biāo)。還有很多有創(chuàng)意的想法,你也可以通過樣式去修飾你的圖標(biāo),這沒有什么太多的限制。我注意到有一個限制,但還沒有找到更好的解決方案。在::before或::after上使用CSS3 Transition無法正常運(yùn)行。
查看Jason CranfordTeague在CodePen制作的示例。嘗試在圖標(biāo)上添加懸停效果或者點(diǎn)擊“CSS”或“HTML”選項(xiàng)卡,查看運(yùn)行的代碼。
使用IcoMoon制作你自己的或網(wǎng)頁字體圖標(biāo)
現(xiàn)在,大家又要開始糾結(jié)一個問題了“我要怎么才能獲取圖標(biāo)的網(wǎng)頁字體或者是制作自定義的圖標(biāo)網(wǎng)頁字體”。雖然現(xiàn)在有很多地方提供免費(fèi)和付費(fèi)的圖標(biāo)字體,但最好的解決方案還是使用類似IcoMoon這樣的網(wǎng)頁應(yīng)用程序,可以在線選擇自己需要的圖標(biāo),因?yàn)樗虼蠹姨峁┝松锨ХN不同類型的圖標(biāo)。當(dāng)然,你也可以在上面使用免費(fèi)的圖標(biāo)和付費(fèi)的圖標(biāo)。
IcoMoon允許你創(chuàng)建自己獨(dú)特的圖標(biāo)集,甚至你可以創(chuàng)建自己自義的圖標(biāo)。
是什么讓IcoMoon成為制作網(wǎng)樣字體圖標(biāo)的殺手級的應(yīng)用呢?那是因?yàn)槟憧梢酝ㄟ^IcoMoon或上傳SVG文件(可以通過Photoshop、Illustrator和其他制作矢量圖的應(yīng)用軟件制作的圖標(biāo)導(dǎo)出成SVG文件)創(chuàng)建你自己需要的圖標(biāo)。
步驟1打開IcoMoon
IcoMoon應(yīng)用軟件開始要火了。有幾百個圖標(biāo)可供你選擇或者通過點(diǎn)擊“圖標(biāo)庫”(拉到頁面最底部有一個More Icon Sets…鏈接),選擇你自己需要的字體圖標(biāo)文件。你也可以重置圖標(biāo)的大小,默認(rèn)是16px。
步驟2A:添加圖標(biāo)——從提供的列表中選擇
從列表中選擇你需要的圖標(biāo)。就是這么簡單,單擊你喜歡的圖標(biāo),他們添加到列表中。你會發(fā)現(xiàn),你選擇的圖標(biāo)他會高亮顯示,圖標(biāo)邊框變成橙色和背景變成白色。并且頂部菜單欄中會顯示你選中的圖標(biāo)數(shù)量。
步驟2B:添加圖標(biāo)——編輯現(xiàn)有的圖標(biāo)
如果圖標(biāo)只是接近你所需的,那么你可以使用IcoMoon進(jìn)行編輯。首先點(diǎn)擊頂部的鉛筆工具(編輯工具),然后點(diǎn)擊你需要編輯的圖標(biāo)。這個時候圖標(biāo)也會高亮顯示成藍(lán)色背景。點(diǎn)擊你需要的編輯的圖標(biāo),將會彈出一個浮窗,讓你編輯圖標(biāo),你可以旋轉(zhuǎn)圖標(biāo),調(diào)整圖標(biāo)的位置等。
使用IcoMoon應(yīng)用編輯你需要的圖標(biāo)。
步驟2C:添加圖標(biāo)——制作你自己的圖標(biāo)
IcoMoon應(yīng)用可以通過導(dǎo)入SVG文件來創(chuàng)建圖標(biāo)。OmniGraffle和Adobe Illustrator導(dǎo)出的SVG文件都可以應(yīng)用。在頂部,點(diǎn)擊“導(dǎo)入圖標(biāo)(Import Icons)”按鈕,在彈窗中選擇有效的SVG文件。然后你就可以看自定義的圖標(biāo)。確認(rèn)這些是你需要的圖標(biāo),如果不是,你可以重新選擇新的字體來替代。
創(chuàng)建自己定義圖標(biāo)的一些有用建議:
- 描邊程序會忽略,所以有形狀必須填充
- 所有填充必須連結(jié)在一起
- 只使用一種顏色(最好是黑色),因?yàn)樘畛鋵⑥D(zhuǎn)換成一個單一的顏色
- 不要使用奇/偶的填充規(guī)則
- 輸出的圖像為單一的對象。在Illustrator中,將畫板轉(zhuǎn)成圖形的邊界。(Object > Artboards > Fit to Artwork Bounds)
步驟3:生成字體文件
在頁面腳部,點(diǎn)擊“font”按鈕。該首先項(xiàng)允許你修改你的字體名稱,創(chuàng)建帶icon-前綴的類名和創(chuàng)建base64編碼,然后將這些數(shù)據(jù)結(jié)合到一個CSS文件之中。
每個圖標(biāo)都可以調(diào)整其對應(yīng)的字符。只需要點(diǎn)擊當(dāng)前圖標(biāo)的位置,鍵入自己需要的字符。理想情況之下,按字母的順序開始構(gòu)建。既然你知道誰會使用這些圖標(biāo),應(yīng)該花一些時間將給這些圖標(biāo)定義一些更有意義的名稱。
在你的字體中你可以隨意給圖形調(diào)整位置和代碼。
或者你也可以選擇使用Unicode編碼。在左上方,有一個下拉重置編碼。單擊選擇“Private Use Area”。這將重新標(biāo)識所有的字形和Unicode編碼。一旦,你設(shè)置好這些,你可以點(diǎn)擊“Download”按鈕下載文件。
步驟4:在你的網(wǎng)站上添加字體
網(wǎng)站上下載下來的.zip文件,里面包含了一切使用說明,你可以將這些添加到你的網(wǎng)站上。
提供的CSS示例中,你可以復(fù)制和指定這些圖標(biāo)的具體位置。然而,IcoMoon包括了一個微小的CSS代碼來設(shè)置圖標(biāo),他采用了大的負(fù)margin,并且隱藏了HTML文本和綁定的數(shù)據(jù),而不是我們使用的font-size的方法。
結(jié)束
使用網(wǎng)頁字體制作圖標(biāo)并不是一個全新的概念。像IcoMoon這樣的網(wǎng)頁應(yīng)用真的是一個很好的工具,能幫助你使用字體制作圖標(biāo)成為現(xiàn)實(shí)。隨著網(wǎng)頁字體制作圖標(biāo)的日益普及,將會迅速取代CSS Sprites方案,這也讓UI設(shè)計(jì)師可以加入更多的創(chuàng)意空間。
但是,在Web標(biāo)準(zhǔn)仍然會有一些失蹤。可能使網(wǎng)頁圖標(biāo)更加有用和有效,W3C標(biāo)準(zhǔn)應(yīng)該添加icon或iconlable標(biāo)簽添加到HTML中,這樣讓圖標(biāo)更具語義化。在此期間,我們不得不更多的先用i或 span標(biāo)簽。
翻譯原文轉(zhuǎn)載自:http://www.gbtags.com/gb/site/shirleyqin.htm
英文原文:webstandardssherpa
via?W3C
總結(jié)
- 上一篇: 响应式开发总结
- 下一篇: Bootstrap响应式Web开发(一)