<optgroup id="zegwu"></optgroup>
  1. <legend id="zegwu"></legend>
      <track id="zegwu"></track><optgroup id="zegwu"></optgroup>

      1. <ruby id="zegwu"><i id="zegwu"></i></ruby>

      2. <optgroup id="zegwu"></optgroup>
      3. <span id="zegwu"><output id="zegwu"></output></span>
        <span id="zegwu"><sup id="zegwu"></sup></span>
        1. <ol id="zegwu"></ol>
          1. <optgroup id="zegwu"><li id="zegwu"><del id="zegwu"></del></li></optgroup><span id="zegwu"><sup id="zegwu"></sup></span>
            <span id="zegwu"><output id="zegwu"><nav id="zegwu"></nav></output></span><acronym id="zegwu"><blockquote id="zegwu"></blockquote></acronym>

              <optgroup id="zegwu"><em id="zegwu"><del id="zegwu"></del></em></optgroup><legend id="zegwu"><i id="zegwu"></i></legend>
              1. <cite id="zegwu"></cite>
                <optgroup id="zegwu"><li id="zegwu"></li></optgroup>

                  1. <legend id="zegwu"></legend>

                  2. <track id="zegwu"><em id="zegwu"><del id="zegwu"></del></em></track>
                  3.  

                    關于濟南網站建設中Unicode字符集的分析

                    前一段時間,我工作的一個濟南網站建設,需要一些圖標。 “沒問題,”我想。 “我知道該怎么處理這個問題。 我將使用一個@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的心臟圖標,然后用&#x2665 ,不?。 以這種方式嵌入符號是最安全的方法,但添加口音等體副本不推薦 ,因為它會使代碼難以閱讀和維護。 在這種情況下,得到的編碼右更好。

                    手工采摘字體

                    的一個特點@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????;
                     <span>&#x2665;</span>
                    HTML(十進制數) &#????;
                     <span>&#9829;</span>

                    (注:無x為十六進制數)

                    CSS內容(數量必須是十六進制) \????
                     .heart:before { content: '\2665'; }
                    unicode-range (數量必須是十六進制) U+????
                     @font-face { font-family: heartFont; src: url(fonts/heart-font.ttf) format("opentype"); unicode-range: U+2665; }

                    它并沒有結束

                    這是它的現在,但很多有用的文章和工具都在那里。 下面是一些可以幫助你:

                    • “ 文章,最佳實踐和教程 ,“W3C國際活動
                      一個大集合的文章,介紹了編碼和國際化主題
                    • “ 防彈能夠出入的圖標字體 ,“扎克萊澤曼,燈絲集團
                      如果你還沒有讀過扎克的有關圖標字體文章
                    • “ 創建自定義字體棧與Unicode的范圍 ,“德魯麥克萊倫,24Ways
                      使用上更詳細unicode-range
                    • Icomoon
                      一個偉大的工具來構建一個自定義圖標字體
                    • Shapecatcher
                      為直觀地找到特定的Unicode字符真正有用
                    • 統一
                      我的資源給你如何支持一個特定的Unicode字符是跨瀏覽器和設備的想法。

                    Comments are closed.

                     
                    四虎在线国产精品_久久18禁高潮出水呻吟娇喘_2020高清国产毛片在线_国产玖玖视频在线观看

                    <optgroup id="zegwu"></optgroup>
                    1. <legend id="zegwu"></legend>
                        <track id="zegwu"></track><optgroup id="zegwu"></optgroup>

                        1. <ruby id="zegwu"><i id="zegwu"></i></ruby>

                        2. <optgroup id="zegwu"></optgroup>
                        3. <span id="zegwu"><output id="zegwu"></output></span>
                          <span id="zegwu"><sup id="zegwu"></sup></span>
                          1. <ol id="zegwu"></ol>
                            1. <optgroup id="zegwu"><li id="zegwu"><del id="zegwu"></del></li></optgroup><span id="zegwu"><sup id="zegwu"></sup></span>
                              <span id="zegwu"><output id="zegwu"><nav id="zegwu"></nav></output></span><acronym id="zegwu"><blockquote id="zegwu"></blockquote></acronym>

                                <optgroup id="zegwu"><em id="zegwu"><del id="zegwu"></del></em></optgroup><legend id="zegwu"><i id="zegwu"></i></legend>
                                1. <cite id="zegwu"></cite>
                                  <optgroup id="zegwu"><li id="zegwu"></li></optgroup>

                                    1. <legend id="zegwu"></legend>

                                    2. <track id="zegwu"><em id="zegwu"><del id="zegwu"></del></em></track>