前一段時間，我工作的一個濟(jì)南網(wǎng)站建設(shè)，需要一些圖標(biāo)。 “沒問題，”我想。 “我知道該怎么處理這個問題。 我將使用一個@font-face的高分辨率屏幕設(shè)置圖標(biāo)。 這將是一個單獨的文件，以減少HTTP請求，我將只包括我所需要的，以減少文件大小的圖標(biāo)?！?/p>
“我什至可以使用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)碰到過。
何必呢？
但是，在我們到達(dá)的是，我們只是要確保這是一切都是值得的。
（哦，如果我聽到的怨言“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字符的十六進(jìn)制值。
那么，你怎么知道使用哪個Unicode字符？ 你可以去通過許多資源，列出所有的110,000個字符中的一個，但你可能已經(jīng)有了更好的事情要做。 Shapecatcher使生活更容易一點：抓你后的形狀，它會返回一個列表類似，看個字符。
挑選你最喜歡的之一，復(fù)制Unicode十六進(jìn)制值，并將其粘貼到IcoMoon。 一旦你已經(jīng)為你的所有圖標(biāo)做到了這一點，請下載@font-face包是正常的。
因此，你應(yīng)該使用哪些字符？
好吧，我不得不推遲到一切有關(guān)Web杰里米Keith的回答：“ 這要看 。“在我的測試中，對于任何給定的Unicode字符支持巨大的變化（由”支持，“我的意思是，無論是@font-face圖標(biāo)顯示或底層的Unicode字符出現(xiàn)，而不是用戶看到一個空矩形或問號或什么都沒有）。 在同一個“甚至Unicode字符塊的相關(guān)符號“往往有很大的不同程度的支持。
但我可以提供一點幫助。 一旦你知道你想要使用的Unicode字符， 通過統(tǒng)一運行它 ，它會給你基于設(shè)備支持得分，我已經(jīng)這么遠(yuǎn)測試。
如果你感到快樂無論是與@font-face圖標(biāo)或Unicode字符被顯示，你應(yīng)該會看到非常高的支持。 一些圖標(biāo)上，我所測試過的一切工作。
最大的例外是表情符號的字符 ，我會遠(yuǎn)離。 大約一半，我就已經(jīng)測試過的設(shè)備不顯示@font-face的圖標(biāo)，和許多不顯示任何有意義的。 此外，iOS的替換它們固定大小的彩色圖形，所以試圖與縮放它們font-size將無法正常工作。
此外，如果一個設(shè)備可以呈現(xiàn)一個Unicode字符，它通常也能呈現(xiàn)一個@font-face使用該字符圖標(biāo)。 所以，你需要決定的權(quán)衡：使用一個圖標(biāo)，字體為您提供了更多的控制設(shè)計，但隨后你會被添加到頁面的權(quán)重和延緩圖標(biāo)的渲染，直到字體加載。
如果你只是直接使用Unicode字符，則可以適用于各種視覺樣式編制。 即使在同一臺計算機，瀏覽器可以在相當(dāng)不同的方式呈現(xiàn)相同的字符。
在許多項目中，一致性和控制您的使用得到@font-face圖標(biāo)是值得的。 只把你需要的字體文件的圖標(biāo)將最大限度地減少下載時間。
說什么更多關(guān)于@font-face的圖標(biāo)是沒有意義的，因為扎克利沙曼寫了這樣一個優(yōu)秀和良好的研究文章 。
無障礙
扎克看起來深度使用圖標(biāo)以這種方式的可訪問性的影響，我想補充幾點想法。
有兩個主要的問題在這里：屏幕閱讀器要么完全忽略的圖標(biāo)（這將讓用戶不知道有那么點意思進(jìn)行交互）或宣布一些看似無關(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的確實有幾個技巧了它的袖子。 一種方法比較違心，這可能會產(chǎn)生回退一個字符支持常用字符的寬度，如果不同，確定第一個字符呈現(xiàn)如預(yù)期。
另一個重點是試圖確定繪文字支持的字符繪制到canvas的元素，然后檢查單個像素，看看它是否被填充的字符。 但問題是，正如我們已經(jīng)看到的是，Unicode支持不是一個布爾值; 僅僅因為一個瀏覽器顯示一個字符并不意味著它會顯示另一個。 所以，我不會依靠這些方法一般，但他們可能會在某些情況下非常有用。
編碼你的Unicode
這里提的編碼很可能是值得的，如果您正在使用的Unicode。 編碼方式告訴瀏覽器如何解釋一個頁面上的任何Unicode字符。 如果使用文本編輯器的編碼不同，您的最終用戶的設(shè)置，也沒有說明，以幫助它的瀏覽器是有意義的，那么用戶會看到很多看似隨機字符或問號。
幸運的是，在網(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ù)字基準(zhǔn) ，則字符將通過文檔的編碼類型不受影響 。
換句話說，如果你想用2665的心臟圖標(biāo)，然后用♥ ，不?。 以這種方式嵌入符號是最安全的方法，但添加口音等體副本不推薦 ，因為它會使代碼難以閱讀和維護(hù)。 在這種情況下，得到的編碼右更好。
手工采摘字體
的一個特點@font-face的常常被忽視的是unicode-range 。 這使您可以指定一個特定的字體被用于短短Unicode字符。
但是，為什么你要？
也許你已經(jīng)找到了完美的字體為您的身體的副本，但你寧愿從一個相似的字體一個或兩個標(biāo)點符號，或者你要使用舊式人物 ，但你的身體字體不包括它們。 使用unicode-range ，您可以使用替代字體只為那些想要換出的字符。
你可以指定一個字符，一個逗號分隔的列表，或在字符替換字體被渲染的整個范圍。
它已經(jīng)從使用Unicode工作的其他方法的語法稍有不同。 你需要添加U+字符的十六進(jìn)制數(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)所指定的人。
不過，德魯麥克萊倫有一個變通方法缺乏支持在Firefox 。
Unicode的語法小抄
你如何添加一個Unicode字符將決定您需要引用它的方法。 這里有一個簡單的總結(jié)：
| 哪里 | 句法 | 例子 |
|---|---|---|
| HTML（十六進(jìn)制數(shù)） | &#x????; |
|
| HTML（十進(jìn)制數(shù)） | &#????; |
（注：無 |
| CSS內(nèi)容（數(shù)量必須是十六進(jìn)制） | \???? |
|
unicode-range （數(shù)量必須是十六進(jìn)制） |
U+???? |
|
它并沒有結(jié)束
這是它的現(xiàn)在，但很多有用的文章和工具都在那里。 下面是一些可以幫助你：
- “ 文章，最佳實踐和教程 ，“W3C國際活動
一個大集合的文章，介紹了編碼和國際化主題 - “ 防彈能夠出入的圖標(biāo)字體 ，“扎克萊澤曼，燈絲集團(tuán)
如果你還沒有讀過扎克的有關(guān)圖標(biāo)字體文章 - “ 創(chuàng)建自定義字體棧與Unicode的范圍 ，“德魯麥克萊倫，24Ways
使用上更詳細(xì)unicode-range - Icomoon
一個偉大的工具來構(gòu)建一個自定義圖標(biāo)字體 - Shapecatcher
為直觀地找到特定的Unicode字符真正有用 - 統(tǒng)一
我的資源給你如何支持一個特定的Unicode字符是跨瀏覽器和設(shè)備的想法。
