前一段時間,我工作的一個濟南網站建設,需要一些圖標。 “沒問題,”我想。 “我知道該怎么處理這個問題。 我將使用一個@font-face
的高分辨率屏幕設置圖標。 這將是一個單獨的文件,以減少HTTP請求,我將只包括我所需要的,以減少文件大小的圖標?!?/p>
“我什至可以使用Unicode字符作為圖標的基礎上,因此,如果@font-face
不支持,那么用戶仍然會看到類似意圖圖標?!拔矣X得很高興,因為。
也就是說,直到我跑了頁面中的設備的實驗室。
在某些設備上,一些圖標不顯示。 然而,在相同的設備,其他人,所以顯然這不是一個@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字符。 我會說實話 – 這不是最好玩的我曾經有過。 所以,我會救你的麻煩和分享的一些問題和可能的解決辦法,我已經碰到過。
何必呢?
但是,在我們到達的是,我們只是要確保這是一切都是值得的。
(哦,如果我聽到的怨言“Opera Mini的?沒有人會使用,”然后再考慮有7000萬Opera Mini用戶比ipad公司在世界上。)
在我看來,使用底層的Unicode字符似乎是最穩健的做法,提供一個可視化圖標,設備和瀏覽器的最大數量。
你怎么做,然后呢?
如果你還沒有使用Unicode字符@font-face
的圖標,不用擔心。 像工具IcoMoon變得簡單。 當你選擇你要使用并單擊生成字體的圖標,你會看到一個頁面,顯示所有的你所選擇的圖標,用他們的名字,他們將被映射到Unicode代碼點。 這通常會是這樣的e600
,并且這個數字是什么,你會需要更換與您所選擇的Unicode字符的十六進制值。
那么,你怎么知道使用哪個Unicode字符? 你可以去通過許多資源,列出所有的110,000個字符中的一個,但你可能已經有了更好的事情要做。 Shapecatcher使生活更容易一點:抓你后的形狀,它會返回一個列表類似,看個字符。
挑選你最喜歡的之一,復制Unicode十六進制值,并將其粘貼到IcoMoon。 一旦你已經為你的所有圖標做到了這一點,請下載@font-face
包是正常的。
因此,你應該使用哪些字符?
好吧,我不得不推遲到一切有關Web杰里米Keith的回答:“ 這要看 ?!霸谖业臏y試中,對于任何給定的Unicode字符支持巨大的變化(由”支持,“我的意思是,無論是@font-face
圖標顯示或底層的Unicode字符出現,而不是用戶看到一個空矩形或問號或什么都沒有)。 在同一個“甚至Unicode字符塊的相關符號“往往有很大的不同程度的支持。
但我可以提供一點幫助。 一旦你知道你想要使用的Unicode字符, 通過統一運行它 ,它會給你基于設備支持得分,我已經這么遠測試。
如果你感到快樂無論是與@font-face
圖標或Unicode字符被顯示,你應該會看到非常高的支持。 一些圖標上,我所測試過的一切工作。
最大的例外是表情符號的字符 ,我會遠離。 大約一半,我就已經測試過的設備不顯示@font-face
的圖標,和許多不顯示任何有意義的。 此外,iOS的替換它們固定大小的彩色圖形,所以試圖與縮放它們font-size
將無法正常工作。
此外,如果一個設備可以呈現一個Unicode字符,它通常也能呈現一個@font-face
使用該字符圖標。 所以,你需要決定的權衡:使用一個圖標,字體為您提供了更多的控制設計,但隨后你會被添加到頁面的權重和延緩圖標的渲染,直到字體加載。
如果你只是直接使用Unicode字符,則可以適用于各種視覺樣式編制。 即使在同一臺計算機,瀏覽器可以在相當不同的方式呈現相同的字符。
在許多項目中,一致性和控制您的使用得到@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字符。 如果使用文本編輯器的編碼不同,您的最終用戶的設置,也沒有說明,以幫助它的瀏覽器是有意義的,那么用戶會看到很多看似隨機字符或問號。
幸運的是,在網絡上幾乎所有這些天使用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 -替換字體將被應用到所有的字符,不只是你的范圍內所指定的人。
不過,德魯麥克萊倫有一個變通方法缺乏支持在Firefox 。
Unicode的語法小抄
你如何添加一個Unicode字符將決定您需要引用它的方法。 這里有一個簡單的總結:
哪里 | 句法 | 例子 |
---|---|---|
HTML(十六進制數) | &#x????; |
|
HTML(十進制數) | &#????; |
(注:無 |
CSS內容(數量必須是十六進制) | \???? |
|
unicode-range (數量必須是十六進制) |
U+???? |
|
它并沒有結束
這是它的現在,但很多有用的文章和工具都在那里。 下面是一些可以幫助你:
- “ 文章,最佳實踐和教程 ,“W3C國際活動
一個大集合的文章,介紹了編碼和國際化主題 - “ 防彈能夠出入的圖標字體 ,“扎克萊澤曼,燈絲集團
如果你還沒有讀過扎克的有關圖標字體文章 - “ 創建自定義字體棧與Unicode的范圍 ,“德魯麥克萊倫,24Ways
使用上更詳細unicode-range
- Icomoon
一個偉大的工具來構建一個自定義圖標字體 - Shapecatcher
為直觀地找到特定的Unicode字符真正有用 - 統一
我的資源給你如何支持一個特定的Unicode字符是跨瀏覽器和設備的想法。
近期評論