前一段時間，我工作的一個濟南網(wǎng)站建設(shè)，需要一些圖標(biāo)。 “沒問題，”我想。 “我知道該怎么處理這個問題。 我將使用一個@font-face的高分辨率屏幕設(shè)置圖標(biāo)。 這將是一個單獨的文件，以減少HTTP請求，我將只包括我所需要的，以減少文件大小的圖標(biāo)。“

“我什至可以使用Unicode字符作為圖標(biāo)的基礎(chǔ)上，因此，如果@font-face不支持，那么用戶仍然會看到類似意圖圖標(biāo)?！拔矣X得很高興，因為。

也就是說，直到我跑了頁面中的設(shè)備的實驗室。

在某些設(shè)備上，一些圖標(biāo)不顯示。 然而，在相同的設(shè)備，其他人，所以顯然它不是一個@font-face的問題。 那一定是底層的Unicode。

怎么辦？

• 我可以用連字為@font-face圖標(biāo)。 這些都是偉大的輔助功能，但不支持在Internet Explorer 9或更早版本。
• 我可以使用默認(rèn)的“空白”的Unicode字符（ PUA范圍 ），其中應(yīng)用程序，如IcoMoon默認(rèn)。 但是，再說一次， Internet Explorer有問題 ，如果用戶設(shè)置了默認(rèn)字體（如果他們是閱讀障礙，例如），那么他們將不會看到任何有意義的東西。
• 有一些使用SVG好的理由 ，但我喜歡的靈活性@font-face ：改變懸停顏色很容易，例如，和@font-face圖標(biāo)將子像素抗鋸齒渲染，而SVG的用途灰度。

我很高興與底層的Unicode字符，因為它們給了一個很好的回退在Windows Phone 7，Opera Mini的老黑莓手機不支持用戶@font-face 。 相反，我想，以確定哪些Unicode字符，我可以放心地使用。

于是，我開始做一些測試。 而這導(dǎo)致了一些更多的測試，然后更多一些。

到目前為止，我已經(jīng)看了關(guān)于78的設(shè)備和5屏幕閱讀器107 Unicode字符。 我會說實話 – 這不是最好玩的我曾經(jīng)有過。 所以，我會救你的麻煩和分享的一些問題和潛在的解決方案，我已經(jīng)遇到。

何必呢？

但是，在我們到達的是，我們只是要確保這是一切都是值得的。
從左到右依次為： @font-face圖標(biāo)用在Chrome結(jié)扎; @font-face圖標(biāo)使用Internet Explorer 9結(jié)扎（是的，什么也沒有）; @font-face圖標(biāo)的Opera Mini使用的是Unicode的備用; @font-face使用Opera Mini的一個PUA代碼點（是的，什么也沒有）圖標(biāo)。 （ 大版 ）
左：SVG與灰度抗鋸齒。 右： @font-face與像素渲染圖標(biāo)。 （無論在Firefox）。 （ 大版 ）

（哦，如果我聽到的怨言“Opera Mini的？沒有人會使用，”然后再考慮有7000萬Opera Mini用戶的iPad比 的世界。）

在我看來，使用底層的Unicode字符似乎是最穩(wěn)健的做法，提供一個可視化圖標(biāo)，設(shè)備和瀏覽器的最大數(shù)量。

你怎么做，然后呢？

如果你還沒有使用Unicode字符@font-face的圖標(biāo)，不用擔(dān)心。 像工具IcoMoon 使它簡單。 當(dāng)你選擇你要使用并單擊生成字體的圖標(biāo)，你會看到一個頁面，顯示所有的你所選擇的圖標(biāo)，用他們的名字，他們將被映射到Unicode代碼點。 這通常是像e600 ，這個數(shù)字是什么，你會需要更換與您所選擇的Unicode字符的十六進制值。
像IcoMoon工具能夠方便地生成圖標(biāo)字體。 （ 大版 ）

那么，你怎么知道使用哪個Unicode字符？ 你可以去通過許多資源，列出所有的110,000個字符中的一個，但你可能已經(jīng)有了更好的事情要做。 Shapecatcher 讓生活更容易一點：抓你后的形狀，它將返回列表外觀相似的字符。
Shapecatcher將返回一個選擇的外觀類似的圖標(biāo)，為您服務(wù)。 （ 大版 ）

挑選你最喜歡的之一，復(fù)制Unicode十六進制值，并將其粘貼到IcoMoon。 一旦你已經(jīng)為你的所有圖標(biāo)做到了這一點，請下載@font-face包是正常的。

因此，你應(yīng)該使用哪些字符？

好吧，我不得不推遲到一切有關(guān)Web杰里米Keith的回答是：“ 這要看 ?！霸谖业臏y試中，對于任何給定的Unicode字符支持巨大的變化（由”支持，“我的意思是，無論是@font-face圖標(biāo)顯示或底層的Unicode字符出現(xiàn)，而不是用戶看到一個空矩形或問號或什么都沒有）。 在同一個“甚至Unicode字符塊 的相關(guān)符號“往往有很大的不同程度的支持。

但我可以提供一點幫助。 一旦你知道你想要使用的Unicode字符， 通過統(tǒng)一運行 ，這將給你的基礎(chǔ)上的設(shè)備支持得分，我已經(jīng)這么遠測試。

如果你感到快樂無論是與@font-face圖標(biāo)或Unicode字符被顯示，你應(yīng)該會看到非常高的支持。 一些圖標(biāo)上，我所測試過的一切工作。

最大的例外是繪文字字符 ，我會遠離。 大約一半，我就已經(jīng)測試過的設(shè)備不顯示@font-face的圖標(biāo)，和許多不顯示任何有意義的。 此外，iOS的替換它們固定大小的彩色圖形，所以試圖與縮放它們font-size將無法正常工作。
變異表情符號字符。 從左到右依次為：火狐（Windows 7）中，鉻（Windows 7）中，鉻（安卓4.2.1），歌劇院（Windows 7的）和Safari（IOS）。 （ 大版 ）

此外，如果一個設(shè)備可以呈現(xiàn)一個Unicode字符，它通常也能呈現(xiàn)一個@font-face使用該字符圖標(biāo)。 所以，你需要決定的權(quán)衡：使用一個圖標(biāo)，字體為您提供了更多的控制設(shè)計，但隨后你會被添加到頁面的權(quán)重和延緩圖標(biāo)的渲染，直到字體加載。

如果你只是直接使用Unicode字符，則可以適用于各種視覺樣式編制。 即使在同一臺計算機，瀏覽器可以在相當(dāng)不同的方式呈現(xiàn)相同的字符。
Unicode字符260E顯示在火狐，Chrome，IE瀏覽器和Opera一樣的Windows 7機器上，并在iOS。 （ 大版 ）

在許多項目中，一致性和控制您的使用得到@font-face圖標(biāo)是值得的。 只把你需要的字體文件的圖標(biāo)將最大限度地減少下載的時間。

說什么更多關(guān)于@font-face的圖標(biāo)是沒有意義的，因為扎克利沙曼寫了這樣一個優(yōu)秀和良好的研究文章 。

無障礙

扎克看起來深度使用圖標(biāo)以這種方式的可訪問性的影響，我想補充幾點想法。

有兩個主要的問題在這里：屏幕閱讀器要么完全忽略的圖標(biāo)（這將讓用戶不知道有那么點意思進行交互）或宣布一些看似無關(guān)緊要的。 例如，如果你使用Unicode字符2261為您的“漢堡”圖標(biāo)，它要么被忽略或宣布為“平等”或“一致”，根據(jù)不同的屏幕閱讀器。 無論這些將幫助用戶了解此元素。

最好的方法取決于該圖標(biāo)是什么。 如果它僅僅是增加了視覺的蓬勃發(fā)展到一個文本標(biāo)簽或標(biāo)題，那么我建議你從屏幕閱讀器隱藏圖標(biāo)。 在這種情況下，而不是直接加入圖標(biāo)的字體到元件中的標(biāo)準(zhǔn)方法（即通過使用:before或:after CSS偽元素），將其添加到元件內(nèi)部的跨度。 通過這種方式，你可以添加aria-hidden="true"的跨度，這將阻止它在一個被宣布的屏幕閱讀器的合理數(shù)量的 。

 <span aria-hidden="true">≡</span> Menu

但是，如果該圖標(biāo)將被用于自身，無其他任何提供意義或上下文，那么我建議像以前那樣隱藏的圖標(biāo)，但補充說，在視覺上隱藏的文本標(biāo)簽。 這將提供一個線索，有一些與互動。

 <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幫助？

我聽說，你應(yīng)該包括像Arial字體的Unicode MS字體，在被用來顯示Unicode字符的字體系列堆棧的建議，但并不保證符號會出現(xiàn)的每一個人。 如果瀏覽器不能找到那些你已經(jīng)列出了所需的Unicode字符的字體font-family申報，然后它會試圖找到在OS任何字體將顯示它。

一致性是很難得的，雖然，因為這將取決于該特定設(shè)備上所使用的瀏覽器中可用的字體。 瀏覽器廠商可以自由地尋找任何匹配的字體，但是他們認(rèn)為最好的 – 為求表現(xiàn)，瀏覽器可能會停止搜索，如果它的時間太長。

通過各種手段，包括有Arial Unicode MS或的Segoe UI的符號在font-family申報，如果你喜歡它們?nèi)绾纬尸F(xiàn)您所使用的符號，但你會依賴于被安裝在設(shè)備上的字體。 如果你想控制如何符號看起來，你最好帶@font-face圖標(biāo)。

檢測Unicode支持

所以，可以的JavaScript出手相救？ 好吧，Modernizr的確實有一對夫婦的招數(shù)了它的袖子。 一種方法 比較違心，這可能會產(chǎn)生回退一個字符支持常用字符的寬度，如果不同，決定了第一個字符已經(jīng)呈現(xiàn)如預(yù)期。

另一個重點是試圖確定繪文字支持 的字符繪制到canvas的元素，然后檢查單個像素，看看它是否被填充的字符。 但問題是，正如我們已經(jīng)看到的是，Unicode支持不是一個布爾值; 僅僅因為一個瀏覽器顯示一個字符并不意味著它會顯示另一個。 所以，我不會依靠這些方法一般，但他們可能會在某些情況下非常有用。

編碼你的Unicode

這里提的編碼很可能是值得的，如果您正在使用的Unicode。 編碼方式告訴瀏覽器如何解釋一個頁面上的任何Unicode字符。 如果使用文本編輯器的編碼不同，您的最終用戶的設(shè)置，也沒有說明，以幫助它的瀏覽器是有意義的，那么用戶會看到很多看似隨機字符或問號。
在字形的變化，從一個單一的Unicode代碼點具有不同的頁面編碼的一個例子。 （ 大版 ）

幸運的是，在網(wǎng)絡(luò)上幾乎所有這些天使用UTF-8，所以這不是它曾經(jīng)是頭痛。 但是，它不傷害，以確保，這就是為什么你會聽到的建議，包括<meta charset="utf-8">在<head>您的文件。 如果您指定的HTML文件的編碼，那么你不需要任何鏈接的CSS文件，再指定它 – 它會被認(rèn)為是相同的。

如果你這樣做，你看到的仍然是奇怪的字符，然后檢查您的HTTP標(biāo)頭設(shè)置為UTF-8也是如此。 任何編碼設(shè)置會覆蓋meta charset聲明。

但是，如果你有一個不同的編碼類型工作，那么避免“嵌入”字符（即只需直接粘貼單個字符形狀到文本編輯器）。 如果您使用的完整的參考數(shù)值 ，則字符將不受文檔的編碼類型 。

換句話說，如果你想用2665的心臟圖標(biāo)，然后用&#x2665 ，不?。 以這種方式嵌入符號是最安全的方法，但添加口音等體副本不建議 ，因為它會使代碼難以閱讀和維護。 在這種情況下，得到的編碼右更好。

手工采摘字體

的一個特點@font-face的常常被忽視的是unicode-range 。 這使您可以指定一個特定的字體被用于短短Unicode字符。

但是，為什么你要？

也許你已經(jīng)找到了完美的字體為您的身體的副本，但你寧愿從一個相似的字體一個或兩個標(biāo)點符號，或者你要使用舊式數(shù)字 ，但你的身體字體不包括它們。 使用unicode-range ，您可以使用替代字體只為那些想要換出的字符。

你可以指定 單個字符，一個逗號分隔的列表，或在字符替換字體被渲染的整個范圍。

它已經(jīng)從使用Unicode工作的其他方法的語法稍有不同。 你需要添加U+字符的十六進制數(shù)之前。 所以，如果你想要一個不同的字體為您的所有號碼（這??是0030和0039之間的數(shù)字表示以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字體，除了數(shù)字，這將使用oldStyleFigures字體。

不足之處？ 當(dāng)然，也有一個缺點。 它還是 不工作在Firefox -替換字體將被應(yīng)用到所有的字符，不只是你的范圍內(nèi)所指定的人。
從上到下依次為：無unicode-range使用; unicode-range增加了對數(shù)字; unicode-range為在Firefox中觀看數(shù)字。 （ 大版 ）

不過，德魯麥克萊倫有一個解決方法缺乏支持在Firefox 。

Unicode的語法小抄

你如何添加一個Unicode字符將決定您需要引用它的方法。 這里有一個簡單的總結(jié)：

 <span>&#x2665;</span>

 <span>&#9829;</span>

 .heart:before { content: '\2665'; }

 @font-face { font-family: heartFont; src: url(fonts/heart-font.ttf) format("opentype"); unicode-range: U+2665; }