CSS學習筆記----CSS3自定義字體圖標

作者：大漠日期：2014-01-28 點擊：3220

@font-face

Responsive

本文由大漠根據Jason的《Responsive Webfont Icons》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://webstandardssherpa.com/reviews/responsive-webfont-icons，以及作者相關信息

——作者：Jason

——譯者：大漠

響應式網頁字體圖標

響應式設計中主要面對的問題之一是如何縮放圖標來適應用戶界面，不僅僅是針對於物理尺寸，而且還需要根據屏幕的尺寸和每英寸的像素比例來顯示。一般情況之下，都是通過內聯塊元素<img>標簽來添加圖標。另一種常見的技術是依賴於網格圖標和狀態——CSS Sprites，並將其保存為.gif或.png文件。

然而，更糟糕的是圖片根據響應式內容不斷的放大，對於位圖圖像會產生鋸齒，而且會越明顯。更糟糕的是，CSS Sprites(雪碧圖)制作的圖標更無法輕意的縮放。

響應式網頁字體圖標

在固定尺寸之時，圖標看起來很好，但放大，哪怕稍為放大一點點，邊緣都會有鋸齒，而且看起來模糊。

我想這也是很多設計師和開發人員盡量避免在設計中使用圖標的原因，盡管在設計中使用圖標在有限的空間中展示更好的想法，並且能達到令人意想不到的效果。

要創建響應式設計和可縮放的圖標，我建議使用基於網頁字體制作的矢量圖標來替換位圖圖像。使用矢量圖可以無限制的放大，而無需擔心圖像會失真。在本文中，我將向大家介紹網頁字體制作圖標來替換你設計中的位圖圖標，以提高可訪問性，可擴展性，風格各異的圖標。

為什么選擇網頁字體

網頁字體的工作原理就像在你的文檔中使用其他文件來創建的設計：你只需要將文件上傳到你的服務器上，那么你的網頁就可以下載這些文件，讓他們能運行。但是，我們通常認為網頁字體只是可讀文件，它們用來顯示我們設計中的圖標的丁巴特(dingbat)字符。

技巧很簡單，目前所有瀏覽器都支持。

使用網頁字體制作圖標具有以下三大優勢：

-　易於渲染：網頁字體圖標可以用HTML文本的任何地方。為了屏幕閱讀器能讀到和易於搜索引擎，關鍵之處可以使用CSS制作圖標替換文，向用戶隱藏文本。 -　可擴展性：因為他們使用的是矢量，而不是位圖渲染，圖標可以縮小或放大，盡可能的放大也不會失真。這可以使你根據用戶界面創造出更適合響應式設計中的圖標。 -　易於美化：可以在重新設計圖標的地方使用CSS，而不需要每次為了更新而重新創建圖像。這也就是說，你可以使用CSS字體等樣式來美化你的圖標，不僅讓這些圖標好看，而且可以隨里根據設計需求的變化來隨機修改。

響應式網頁字體圖標

網頁字體制作的圖標放大也不會失真。

如何用網頁字體制作圖標

網頁字體制作圖標的原理是，通過CSS的content屬性給HTML元素添加圖標對應的字符。然后通過@font-face加載制作圖標的的字體，這樣注入的字符就會變成所需的圖標。

首先，你需要制作圖標的網頁圖標字體，然后用特定的ASCII字符（如A,B,C,!,@,#等）或者自定義的Unicode編碼區域來對應不同的圖標。不過在這個圖標區域內，將不能在使用特殊的Unicode字符。

一旦你有了你的字體文件——Entypo字體是一個好的開始，你准備好了嗎？

響應式網頁字體圖標

Entypo字體是一個免費的網頁字體。

步驟1：加載字體文件

首先使用CSS的@font-face規則（確保你已將字體文件上傳到了服務器上）定義字體圖標文件的路徑：

@font-face { font-family: "icons"; src: url("fonts/icons.eot"); src: url("fonts/icons.eot?#iefix") format("embedded-opentype"), url("fonts/icons.woff") format("woff"), url("fonts/icons.ttf") format("truetype"), url("fonts/icons.svg#icons") format("svg"); font-weight: normal; font-style: normal; }

確保你的字體來源包括了TrueType, EOT和WOFF字體格式，還需要包括SVG字體格式。雖然SVG正在快速的被WOFF格式替代，但為了兼容老的iOS設備，還是需要提供的。

有關於如何使用@font-face加載字體，和各種字體所對應的作用，要是您感興趣，可以閱讀《CSS3 @font-face》一文——@大漠。

步驟2：給放置圖標的帶有`icon-`的標簽容器創建CSS樣式

這個選擇器允許你為標簽定義了icon-字符串的容器插入圖標：

[class*="icon-"] { background-image: none; display: inline; font-size: 1em; font-style: normal !important; font-weight: normal !important; height: 1em; overflow: visible; width: 1em; }

[class*="icon-"]是一個屬性選擇器，表達的意思是“只要定義的類名中包含了icon-就會被選擇中”。有關於屬性選擇器詳細介紹，請點擊這里——@大漠。

我們還需要為我們的圖標設置字號font-size，寬度width和高度height的大小為1em。我們使用的是一個相對值，這樣方便於擴展。同時也清除了字體的加粗和斜體樣式，如果你應用了，會使圖標扭曲。

步驟3：通過偽類選擇器創建放置圖標的地方

技巧來了，我們使用CSS的content屬性給偽元素添加字符，然后調用第一步設置的字體：

[class*="icon-"]::before { content: '+'; display: inline-block; font-family: "icons", fantasy !important; line-height: 1; position: relative; top: 2px; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

這里將使用content屬性添加了一個默認的字符“＋”號，使用::before給標簽前面一個占位符。此外添加Webkit的font-smoothing屬性，是一個好辦法，可以讓圖標更平滑。不過這個屬性還不是標准屬性，使用的時候需要添加前端-webkit。

有關於CSS3的偽元素，要是您感興趣的話，可以點擊《CSS3 選擇器——偽類選擇器》——@大漠

步驟4：創建一個選擇器來隱藏圖標標簽中的內容

你可以創建一個hide類，用來隱藏你想隱藏的文本，包括SEO和向后兼容的任何文本。然后在實際使用圖標的標簽上調用這個類名。

.hide { clip: rect(1px, 1px, 1px, 1px); height: 0; opacity: 0; position: absolute; visibility: hidden; width: 0; }

步驟5:給圖標添加指定字符創建CSS

最終通過CSS選擇器給實際圖標使用指定的字符來替代content中的默認字符+。比如這個示例，使用字母t來制作“twitter”圖標。

.icon-twitter::before { content: "t"; }

理論上你也可以使用::after來代替::before，但理論上帶有文本的圖標，一般圖標都是放在文本的前面。

或者你在創建私人的網頁圖標字體，你也可以使用“Unicode”字符，在content屬性中調用你私人的“Unicode”字符生成圖標：

.icon-twitter::before { content: "/eo4o"; }

上面的代碼生成“twitter”圖標是相同的效果，但是，由於某種原因，CSS沒有加載，那么顯示圖標的地方會顯式成一個空格，而不是顯示“t”字母來替代圖標。

步驟6:添加你的HTML

現在是時候為顯示圖標添加所需的HTML代碼。

<i class="icon-twitter"> <span class="hide">Twitter</span> </i>

我在這個例子中使用的是<i>和<span>標簽，在這里不需要考慮具體的語義，所以他是安全的。這也是通常使用的一種方式。

下面我們來看一個典型的例子，頁腳的社交媒體圖標，我們可能會這樣寫HTML代碼：

<div id="footerSocial"> <a href="http://www.twitter.com/"><img src="twitter.png"></a> </div>

也可以用下面的結構來替代：

<ul id="footerSocial"> <a href="http://www.twitter.com/" class="icon-twitter"> <li class="hide">Twitter</li> </a> </ul>

通常大家會認為上面這樣的結構不合理，用a標簽來嵌套li標簽。我個人更趨向使用下面這樣的結構來替代：

<ul id="footerSocial"> <li> <a href="http://www.twitter.com/" class="icon-twitter"> <i class="hide">Twitter</i> </a> </li> </ul>

然后根據需求添加需要的樣式。有一件事情，網頁字體這種技術不能制作多顏色的圖標。也就是說這些圖標都將是一種顏色。

有關於使用網頁字體制作多顏色的圖標，並不是無法實現，只是會更為復雜一些，在互聯網上已經有這方面的教程。比如說Forecast Font就是一個成功的案例，使用字體圖標制作了一套彩色的天氣圖標。相關的教程，如果你感興趣的話可以點擊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還寫了一個示例——@大漠

想玩代碼？請訪問Jason CranfordTeague在CodePen寫的示例Styling Webfont Icons。點擊“CSS”選項卡，然后嘗試修改body選擇器中的font-size屬性值。這圖標可以放大和縮小，而且永遠不會失真。

修飾網頁字體圖標

一旦創建好了，可以使用CSS樣式或者CSS的偽類，如:hover、:active和:focus來修飾網頁字體圖標。還有很多有創意的想法，你也可以通過樣式去修飾你的圖標，這沒有什么太多的限制。

我注意到有一個限制，但還沒有找到更好的解決方案。在::before或::after上使用CSS3 Transition無法正常運行。

查看Jason CranfordTeague在CodePen制作的示例。嘗試在圖標上添加懸停效果或者點擊“CSS”或“HTML”選項卡，查看運行的代碼。

使用IcoMoon制作你自己的或網頁字體圖標

現在，大家又要開始糾結一個問題了“我要怎么才能獲取圖標的網頁字體或者是制作自定義的圖標網頁字體”。雖然現在有很多地方提供免費和付費的圖標字體，但最好的解決方案還是使用類似IcoMoon這樣的網頁應用程序，可以在線選擇自己需要的圖標，因為他向大家提供了上千種不同類型的圖標。當然，你也可以在上面使用免費的圖標和付費的圖標。

IcoMoon允許你創建自己獨特的圖標集，甚至你可以創建自己自義的圖標。

是什么讓IcoMoon成為制作網樣字體圖標的殺手級的應用呢？那是因為你可以通過IcoMoon或上傳SVG文件（可以通過Photoshop、Illustrator和其他制作矢量圖的應用軟件制作的圖標導出成SVG文件）創建你自己需要的圖標。

步驟1：打開IcoMoon

IcoMoon應用軟件開始要火了。有幾百個圖標可供你選擇或者通過點擊“圖標庫”(拉到頁面最底部有一個More Icon Sets…鏈接)，選擇你自己需要的字體圖標文件。

你也可以重置圖標的大小，默認是16px。

響應式網頁字體圖標

步驟2A：添加圖標——從提供的列表中選擇

從列表中選擇你需要的圖標。就是這么簡單，單擊你喜歡的圖標，他們添加到列表中。你會發現，你選擇的圖標他會高亮顯示，圖標邊框變成橙色和背景變成白色。並且頂部菜單欄中會顯示你選中的圖標數量。

響應式網頁字體圖標

步驟2B：添加圖標——編輯現有的圖標

如果圖標只是接近你所需的，那么你可以使用IcoMoon進行編輯。首先點擊頂部的鉛筆工具（編輯工具），然后點擊你需要編輯的圖標。這個時候圖標也會高亮顯示成藍色背景。

響應式網頁字體圖標

點擊你需要的編輯的圖標，將會彈出一個浮窗，讓你編輯圖標，你可以旋轉圖標，調整圖標的位置等。

響應式網頁字體圖標

使用IcoMoon應用編輯你需要的圖標。

步驟2C：添加圖標——制作你自己的圖標

IcoMoon應用可以通過導入SVG文件來創建圖標。OmniGraffle和Adobe Illustrator導出的SVG文件都可以應用。在頂部，點擊“導入圖標(Import Icons)”按鈕，在彈窗中選擇有效的SVG文件。

響應式網頁字體圖標

然后你就可以看自定義的圖標。確認這些是你需要的圖標，如果不是，你可以重新選擇新的字體來替代。

響應式網頁字體圖標

創建自己定義圖標的一些有用建議：

描邊程序會忽略，所以有形狀必須填充
所有填充必須連結在一起
只使用一種顏色（最好是黑色），因為填充將轉換成一個單一的顏色
不要使用奇/偶的填充規則
輸出的圖像為單一的對象。在Illustrator中，將畫板轉成圖形的邊界。(Object > Artboards > Fit to Artwork Bounds)

步驟3：生成字體文件

在頁面腳部，點擊“font”按鈕。

響應式網頁字體圖標

該首先項允許你修改你的字體名稱，創建帶icon-前綴的類名和創建base64編碼，然后將這些數據結合到一個CSS文件之中。

每個圖標都可以調整其對應的字符。只需要點擊當前圖標的位置，鍵入自己需要的字符。理想情況之下，按字母的順序開始構建。既然你知道誰會使用這些圖標，應該花一些時間將給這些圖標定義一些更有意義的名稱。

響應式網頁字體圖標

在你的字體中你可以隨意給圖形調整位置和代碼。

或者你也可以選擇使用Unicode編碼。在左上方，有一個下拉重置編碼。單擊選擇“Private Use Area”。這將重新標識所有的字形和Unicode編碼。

一旦，你設置好這些，你可以點擊“Download”按鈕下載文件。

步驟4：在你的網站上添加字體

網站上下載下來的.zip文件，里面包含了一切使用說明，你可以將這些添加到你的網站上。

提供的CSS示例中，你可以復制和指定這些圖標的具體位置。然而，IcoMoon包括了一個微小的CSS代碼來設置圖標，他采用了大的負margin，並且隱藏了HTML文本和綁定的數據，而不是我們使用的font-size的方法。

結束

使用網頁字體制作圖標並不是一個全新的概念。像IcoMoon這樣的網頁應用真的是一個很好的工具，能幫助你使用字體制作圖標成為現實。隨着網頁字體制作圖標的日益普及，將會迅速取代CSS　Sprites方案，這也讓UI設計師可以加入更多的創意空間。

但是，在Web標准仍然會有一些失蹤。可能使網頁圖標更加有用和有效，W3C標准應該添加icon或iconlable標簽添加到HTML中，這樣讓圖標更具語義化。在此期間，我們不得不更多的先用i或 span標簽。

擴展閱讀

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

原文地址：http://www.w3cplus.com/css3/responsive-webfont-icons.html