某些HTML角色實體僅在Firefox中很大
[英]Certain HTML Character Entities are HUGE in Firefox Only
問題描述
出於某種原因，在我的Mac OS X的Firefox 12.0中，我的⟩（ ⟩ ）字符比它們應該大得多。 在Chrome和Safari上，它們看起來就像我想要的那樣。
我的.htaccess有AddDefaultCharset utf-8以及我的<head> <meta charset="utf-8"> <head> （因為我將這些文件發送到的組可能不會使用我的.htaccess ）。
此外，根據Adobe的瀏覽器實驗室，IE 7和8只顯示一個方框...有沒有人可以讓這些瀏覽器支持該角色？ 這將使事情變得更容易（因為顏色將會發生變化，因此圖像非常不方便，圖像也不會褪色）。
演示： http ： //cameronspear.com/demos/rang/
這是我在Chrome中看到的，並期望看到：
這是我的Firefox顯示的內容：
這是來自IE8瀏覽器實驗室的截圖：
TL; DR：我希望所有這些截圖看起來像第一個使用⟩aka ⟩ 字符。 使用JavaScript甚至可以接受。
謝謝。
[編輯]我應該指出它並不是那么重要我有⟩ 我可以使用CSS更改其顏色，並使其在多個瀏覽器中看起來相同。
解
我只是想分享我為后人所做的事情。
感謝Pointy的提示和資源，我使用“ 如何制作自己的webfont圖標 ”中描述的模板和方法，使用Inkscape創建了自己的SVG 。 我將一個大角度括號映射到X ，將一個小角度括號映射到x 。
我碰到的一件事是，我的角度需要觸及基線，只有72％的路徑到達頂部以適合“內聯”，所以大寫X是我原來的太高了，小寫x是更內聯的一個。
然后，我將我的SVG到TTF與http://www.freefontconverter.com/並轉換為web字體與http://www.fontsquirrel.com/fontface/generator
......就是這樣。
演示（ http://cameronspear.com/demos/rang/ ）仍在使用。 您可以看到它在所有瀏覽器中看起來都是一致的，並且onclick旋轉動畫已經接近該點等。
[更新]我發現了一個名為IcoMoon的優秀資源，它可以幫助制作字體並為網絡組織字體，並且它接受常規的svg向量，這樣你就可以在Illustrator中制作它，而不是亂用Inkscape，因為IcoMoon處理鍵盤映射和東西。 您只能導出您使用的圖標，因此您只需加載3或4個圖標（如果這是您需要的全部字體）。
它已成為寶貴的資源，我建議其他想進入Icon Fonts的人查看它。 您可以從CSS-Trick的第113次截屏視頻中了解有關整個過程的更多信息。
3 個解決方案
解決方案1
6 2012-06-04 18:18:05
你能使用圖像嗎？ 它們可以在所有瀏覽器中提供一致的外觀。 在許多情況下，圖像優於字符符號。
解決方案2
2 已采納 2012-06-04 18:40:47
制作一個圖標字體很容易，我可以做到，但（對我來說）這個過程有點神秘。 我懷疑有許多實際的圖形藝術家更擅長，而且肯定有很多人比我更了解技術細節。
這是一篇關於該主題的非常詳盡的博客文章。 （不是mny博客。）它沒有很好描述的主要內容是Inkscape“藝術板”區域與字體中每個字形的垂直定位之間的關系。 它進入了一些細節，但我從來沒有弄清楚。
因此，我所做的只是在一側制作方形畫板1024像素。 然后我在Inkscape中設置了一個網格，以便將藝術板分成16x16網格。 這使得（有些）容易設計出能夠以16px字體大小呈現的字符。 （當然你可以根據需要設定不同的字體大小; 16x16適合那些需要非常小的東西。）然后，我只是確保當我把字形放在頁面上時，它們是在一個1em by 1em box（或16px by 16px;但是你想在你的CSS中這樣做）沒有填充。 我使用<i>標簽，並給它們display: inline-block 。 這給了我很大的靈活性，而且通常效果很好。
Inkscape SVG字體工具，溫和地說，非常原始。 這實際上是某人夏季項目的結果。 它起作用，但不過是勉強。 經常保存。
現在生成字體文件的過程有點瘋狂。 我使用FontSquirrel。 我上傳從Inksccape保存的.svg，然后詢問EOT，WOFF和TTF。 令人驚訝的是，它有效。
如果你只需要一些字形，這是一個非常好的方式，因為你將有一個小的字體文件下載，它將被瀏覽器緩存。 然而，有一些可訪問性問題，這種做法充滿爭議，社區中一些更狂熱的成員可能會認為你是野蠻人:-)
解決方案3
2 2012-06-04 19:58:33
這是一個字體問題。 為了最大限度地提高正常渲染稀有字符（大多數字體中不存在的字符）的幾率，請指定包含它的所有字體的最大列表。
該頁面現在只有font-family: Arial,sans-serif設置在包含括號的span元素上。 由於Arial不包含它，每個瀏覽器將使用自己的sans-serif定義。 如果它映射到的地圖不包含括號，聰明的瀏覽器會嘗試一些聰明的東西，比如掃描系統中的其他字體，但這可能仍會導致缺少任何字形。
還有一個問題。 通常，使用像⟩這樣的實體引用並不重要⟩ 而不是角色本身，但在這里它。 按HTML 4.01， ⟩ 意味着U + 232A; 通過HTML5草稿，它意味着U + 27E9。 IE在這里遵循HTML 4.01，而Firefox使用HTML5定義。 所以最好使用你真正想要的字符，無論是UTF-8編碼，還是字符引用〉 。
如果您可以檢查例如U + 232A的字體覆蓋范圍 ，並按優先順序編寫字體。 但是你應該檢查所有字體是否給出了可接受的演示文稿。 例如，如果使用Cambria Math，則默認行高將非常大，因此您可能希望將line-height顯式設置為某個合理的值，如1.3。
最后 - 也許這應該首先被問到 - 你真的想要使用正確的角度支架或數學直角支架嗎？ 它們是括號，用於與左尖括號配對，而不是箭頭符號。
更多信息： 在HTML中使用特殊字符的指南 。
有沒有原生方法可以在javascript中使用HTML轉義字符實體？
[英]Is there a native way to HTML escape character entities in javascript?
當以不允許的字符開頭時，使用正則表達式僅允許 HTML 輸入字段中的某些字符似乎不起作用
[英]Using Regex to only allow certain characters in HTML input field seems not to work when starting with a not allowed character
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.