前一段時間，我工作的一個濟南網站建設，需要一些圖標。 “沒問題，”我想。 “我知道該怎么處理這個問題。 我將使用一個@font-face的高分辨率屏幕設置圖標。 這將是一個單獨的文件，以減少HTTP請求，我將只包括我所需要的，以減少文件大小的圖標?！?/p>
“我什至可以使用Unicode字符作為圖標的基礎上，因此，如果@font-face不支持，那么用戶仍然會看到類似意圖圖標。“我覺得很高興，因為。
也就是說，直到我跑了頁面中的設備的實驗室。
在某些設備上，一些圖標不顯示。 然而，在相同的設備，其他人，所以顯然它不是一個@font-face的問題。 那一定是底層的Unicode。
怎么辦？
- 我可以用連字為
@font-face圖標。 這些都是偉大的輔助功能，但不支持在Internet Explorer 9或更早版本。 - 我可以使用默認的“空白”的Unicode字符（ PUA范圍 ），其中應用程序，如IcoMoon默認。 但是，再說一次， Internet Explorer有問題 ，如果用戶設置了默認字體（如果他們是閱讀障礙，例如），那么他們將不會看到任何有意義的東西。
- 有一些使用SVG好的理由 ，但我喜歡的靈活性
@font-face：改變懸停顏色很容易，例如，和@font-face圖標將子像素抗鋸齒渲染，而SVG的用途灰度。
我很高興與底層的Unicode字符，因為它們給了一個很好的回退在Windows Phone 7，Opera Mini的老黑莓手機不支持用戶@font-face 。 相反，我想，以確定哪些Unicode字符，我可以放心地使用。
于是，我開始做一些測試。 而這導致了一些更多的測試，然后更多一些。
到目前為止，我已經看了關于78的設備和5屏幕閱讀器107 Unicode字符。 我會說實話 – 這不是最好玩的我曾經有過。 所以，我會救你的麻煩和分享的一些問題和潛在的解決方案，我已經遇到。
何必呢？
但是，在我們到達的是，我們只是要確保這是一切都是值得的。
從左到右依次為： @font-face圖標用在Chrome結扎; @font-face圖標使用Internet Explorer 9結扎（是的，什么也沒有）; @font-face圖標的Opera Mini使用的是Unicode的備用; @font-face使用Opera Mini的一個PUA代碼點（是的，什么也沒有）圖標。 （ 大版 ）
左：SVG與灰度抗鋸齒。 右： @font-face與像素渲染圖標。 （無論在Firefox）。 （ 大版 ）
（哦，如果我聽到的怨言“Opera Mini的？沒有人會使用，”然后再考慮有7000萬Opera Mini用戶的iPad比 的世界。）
在我看來，使用底層的Unicode字符似乎是最穩健的做法，提供一個可視化圖標，設備和瀏覽器的最大數量。
你怎么做，然后呢？
如果你還沒有使用Unicode字符@font-face的圖標，不用擔心。 像工具IcoMoon 使它簡單。 當你選擇你要使用并單擊生成字體的圖標，你會看到一個頁面，顯示所有的你所選擇的圖標，用他們的名字，他們將被映射到Unicode代碼點。 這通常是像e600 ，這個數字是什么，你會需要更換與您所選擇的Unicode字符的十六進制值。
像IcoMoon工具能夠方便地生成圖標字體。 （ 大版 ）
那么，你怎么知道使用哪個Unicode字符？ 你可以去通過許多資源，列出所有的110,000個字符中的一個，但你可能已經有了更好的事情要做。 Shapecatcher 讓生活更容易一點：抓你后的形狀，它將返回列表外觀相似的字符。
Shapecatcher將返回一個選擇的外觀類似的圖標，為您服務。 （ 大版 ）
挑選你最喜歡的之一，復制Unicode十六進制值，并將其粘貼到IcoMoon。 一旦你已經為你的所有圖標做到了這一點，請下載@font-face包是正常的。
因此，你應該使用哪些字符？
好吧，我不得不推遲到一切有關Web杰里米Keith的回答是：“ 這要看 。“在我的測試中，對于任何給定的Unicode字符支持巨大的變化（由”支持，“我的意思是，無論是@font-face圖標顯示或底層的Unicode字符出現，而不是用戶看到一個空矩形或問號或什么都沒有）。 在同一個“甚至Unicode字符塊 的相關符號“往往有很大的不同程度的支持。
但我可以提供一點幫助。 一旦你知道你想要使用的Unicode字符， 通過統一運行 ，這將給你的基礎上的設備支持得分，我已經這么遠測試。
如果你感到快樂無論是與@font-face圖標或Unicode字符被顯示，你應該會看到非常高的支持。 一些圖標上，我所測試過的一切工作。
最大的例外是繪文字字符 ，我會遠離。 大約一半，我就已經測試過的設備不顯示@font-face的圖標，和許多不顯示任何有意義的。 此外，iOS的替換它們固定大小的彩色圖形，所以試圖與縮放它們font-size將無法正常工作。
變異表情符號字符。 從左到右依次為：火狐（Windows 7）中，鉻（Windows 7）中，鉻（安卓4.2.1），歌劇院（Windows 7的）和Safari（IOS）。 （ 大版 ）
此外，如果一個設備可以呈現一個Unicode字符，它通常也能呈現一個@font-face使用該字符圖標。 所以，你需要決定的權衡：使用一個圖標，字體為您提供了更多的控制設計，但隨后你會被添加到頁面的權重和延緩圖標的渲染，直到字體加載。
如果你只是直接使用Unicode字符，則可以適用于各種視覺樣式編制。 即使在同一臺計算機，瀏覽器可以在相當不同的方式呈現相同的字符。
Unicode字符260E顯示在火狐，Chrome，IE瀏覽器和Opera一樣的Windows 7機器上，并在iOS。 （ 大版 ）
在許多項目中，一致性和控制您的使用得到@font-face圖標是值得的。 只把你需要的字體文件的圖標將最大限度地減少下載的時間。
說什么更多關于@font-face的圖標是沒有意義的，因為扎克利沙曼寫了這樣一個優秀和良好的研究文章 。
無障礙
扎克看起來深度使用圖標以這種方式的可訪問性的影響，我想補充幾點想法。
有兩個主要的問題在這里：屏幕閱讀器要么完全忽略的圖標（這將讓用戶不知道有那么點意思進行交互）或宣布一些看似無關緊要的。 例如，如果你使用Unicode字符2261為您的“漢堡”圖標，它要么被忽略或宣布為“平等”或“一致”，根據不同的屏幕閱讀器。 無論這些將幫助用戶了解此元素。
最好的方法取決于該圖標是什么。 如果它僅僅是增加了視覺的蓬勃發展到一個文本標簽或標題，那么我建議你從屏幕閱讀器隱藏圖標。 在這種情況下，而不是直接加入圖標的字體到元件中的標準方法（即通過使用:before或:after CSS偽元素），將其添加到元件內部的跨度。 通過這種方式，你可以添加aria-hidden="true"的跨度，這將阻止它在一個被宣布的屏幕閱讀器的合理數量的 。
<span aria-hidden="true">≡</span> Menu
但是，如果該圖標將被用于自身，無其他任何提供意義或上下文，那么我建議像以前那樣隱藏的圖標，但補充說，在視覺上隱藏的文本標簽。 這將提供一個線索，有一些與互動。
<style> .visiblyHidden { /* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } </style> <span aria-hidden="true"> ≡ </span><span>menu</span>
請問font-family幫助？
我聽說，你應該包括像Arial字體的Unicode MS字體，在被用來顯示Unicode字符的字體系列堆棧的建議，但并不保證符號會出現的每一個人。 如果瀏覽器不能找到那些你已經列出了所需的Unicode字符的字體font-family申報，然后它會試圖找到在OS任何字體將顯示它。
一致性是很難得的，雖然，因為這將取決于該特定設備上所使用的瀏覽器中可用的字體。 瀏覽器廠商可以自由地尋找任何匹配的字體，但是他們認為最好的 – 為求表現，瀏覽器可能會停止搜索，如果它的時間太長。
通過各種手段，包括有Arial Unicode MS或的Segoe UI的符號在font-family申報，如果你喜歡它們如何呈現您所使用的符號，但你會依賴于被安裝在設備上的字體。 如果你想控制如何符號看起來，你最好帶@font-face圖標。
檢測Unicode支持
所以，可以的JavaScript出手相救？ 好吧，Modernizr的確實有一對夫婦的招數了它的袖子。 一種方法 比較違心，這可能會產生回退一個字符支持常用字符的寬度，如果不同，決定了第一個字符已經呈現如預期。
另一個重點是試圖確定繪文字支持 的字符繪制到canvas的元素，然后檢查單個像素，看看它是否被填充的字符。 但問題是，正如我們已經看到的是，Unicode支持不是一個布爾值; 僅僅因為一個瀏覽器顯示一個字符并不意味著它會顯示另一個。 所以，我不會依靠這些方法一般，但他們可能會在某些情況下非常有用。
編碼你的Unicode
這里提的編碼很可能是值得的，如果您正在使用的Unicode。 編碼方式告訴瀏覽器如何解釋一個頁面上的任何Unicode字符。 如果使用文本編輯器的編碼不同，您的最終用戶的設置，也沒有說明，以幫助它的瀏覽器是有意義的，那么用戶會看到很多看似隨機字符或問號。
在字形的變化，從一個單一的Unicode代碼點具有不同的頁面編碼的一個例子。 （ 大版 ）
幸運的是，在網絡上幾乎所有這些天使用UTF-8，所以這不是它曾經是頭痛。 但是，它不傷害，以確保，這就是為什么你會聽到的建議，包括<meta charset="utf-8">在<head>您的文件。 如果您指定的HTML文件的編碼，那么你不需要任何鏈接的CSS文件，再指定它 – 它會被認為是相同的。
如果你這樣做，你看到的仍然是奇怪的字符，然后檢查您的HTTP標頭設置為UTF-8也是如此。 任何編碼設置會覆蓋meta charset聲明。
但是，如果你有一個不同的編碼類型工作，那么避免“嵌入”字符（即只需直接粘貼單個字符形狀到文本編輯器）。 如果您使用的完整的參考數值 ，則字符將不受文檔的編碼類型 。
換句話說，如果你想用2665的心臟圖標，然后用♥ ，不?。 以這種方式嵌入符號是最安全的方法，但添加口音等體副本不建議 ，因為它會使代碼難以閱讀和維護。 在這種情況下，得到的編碼右更好。
手工采摘字體
的一個特點@font-face的常常被忽視的是unicode-range 。 這使您可以指定一個特定的字體被用于短短Unicode字符。
但是，為什么你要？
也許你已經找到了完美的字體為您的身體的副本，但你寧愿從一個相似的字體一個或兩個標點符號，或者你要使用舊式數字 ，但你的身體字體不包括它們。 使用unicode-range ，您可以使用替代字體只為那些想要換出的字符。
你可以指定 單個字符，一個逗號分隔的列表，或在字符替換字體被渲染的整個范圍。
它已經從使用Unicode工作的其他方法的語法稍有不同。 你需要添加U+字符的十六進制數之前。 所以，如果你想要一個不同的字體為您的所有號碼（這??是0030和0039之間的數字表示以Unicode）的，你會使用這樣的事情：
@font-face { font-family: 'oldStyleFigures'; src: url(fonts/old-style-figures.ttf) format("opentype"); unicode-range: U+30-39; }
那么你想補充一點：
p { font-family: oldStyleFigures, Arial, sans-serif; }
這意味著，所有的段落文本將使用Arial字體，除了數字，這將使用oldStyleFigures字體。
不足之處？ 當然，也有一個缺點。 它還是 不工作在Firefox -替換字體將被應用到所有的字符，不只是你的范圍內所指定的人。
從上到下依次為：無unicode-range使用; unicode-range增加了對數字; unicode-range為在Firefox中觀看數字。 （ 大版 ）
不過，德魯麥克萊倫有一個解決方法缺乏支持在Firefox 。
Unicode的語法小抄
你如何添加一個Unicode字符將決定您需要引用它的方法。 這里有一個簡單的總結：
| 哪里 | 句法 | 例子 |
|---|---|---|
| HTML（十六進制數） | &#x????; |
|
| HTML（十進制數） | &#????; |
（注：無 |
| CSS內容（數量必須是十六進制） | \???? |
|
unicode-range （數量必須是十六進制） |
U+???? |
|
