响应式网页字体图标
響應(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开发(一)