2012-02-11 5 views
5

、私はアイコンの(@font-faceを使用して)カスタムWebフォントを使用しています。セット内の各文字は適切なUnicode値を持ちます。 WebKitベースのブラウザ(クローム、サファリ、アンドロイド)でWebKit CSSのコンテンツUnicodeのバグ? 1つのページに

は、グリフの一つが示されていません。代わりに、内部に疑問符が付いたデフォルトのグリフまたはダイアモンドが表示されます。 Firefoxの、オペラ、さらにはInternet Explorerで

は、文字がすべて正しくレンダリングされます。サファリ(Windowsの場合)を除き

私はcontent CSSプロパティを介して、Unicode文字を挿入すると、この問題が発生します。私はcharacter referenceを使用してHTMLに直接文字を挿入すると、それが適切にレンダリングされます。 Unicode文字は、CSSコンテンツとして挿入される。例えば

、...

/* CSS: */ 
span.css_font_icon:before { 
    display: inline; 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
    content: '\002302 \01F4A1 \00270D \002139'; 
} 

<!-- HTML --> 
<span class="css_font_icon"></span> 

doesnの...彼らはすべてのFirefox、オペラ、およびInternet Explorerで表示が、2番目の1(\ 01F4A1) Linux、Windows、またはAndroid上のWebkitブラウザには表示されません。代わりに、それは(Androidのブラウザ上の)デフォルトのグリフまたはそれの内部に疑問符(クローム(Windowsの場合)、サファリ(Windowsの場合))のダイヤモンドを示しています。 HTMLのUnicode文字参照を使用して文字を挿入

...

/* CSS: */ 
span.html_font_icon { 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
} 

<!-- HTML: --> 
<span class="html_font_icon">&#x2302;&#x1F4A1;&#x270D;&#x2139;</span> 

は... Firefoxの、オペラ、およびInternet Explorerで正常に動作します。 Chrome(Windows)およびAndroid WebkitブラウザでもHTML文字参照のシンボルが表示されますが、Safari(Windows)ではデフォルトのグリフが表示されます。 http://www.ghodmode.com/testing/unicode-insertion/

私は珍しいWebKitのバグにつまずい持っているか、私は何か間違ったことをしています:

私は、問題を再現小さなページに元のコードを凝縮しましたか?

これをテストするための現在のiOSデバイスがありません。したがって、iPhone/iPadの動作を説明するコメントも歓迎します。

答えて

5

これは最近修正されたa bug in WebKitです(2012年4月)。 my write-up on escape sequences for CSS identifiers言い換えする

:(仕様に従って)理論的に

を、any character can be escaped based on its Unicode code point(例えばため、U + 1D306「センタのtetragram」記号:\1d306又は\01d306)が、older WebKit browsers don’t support this syntax for characters outside the BMP。 +そのため、ブラウザのバグの

は、すなわち、(例えば\d834\df06)UTF-16コード単位でそれらを破壊することにより、これらの文字をエスケープするために別の(non-standard)方法があるが、この構文は(当然)Geckoではサポートされていません。 +およびOpera 12 ++。

現在のところ、non-BMP symbolsをクロスブラウザ形式でエスケープするためのno wayがあるため、エスケープされていないこれらの文字を使用することをお勧めします。

あなたの場合、U + 1F4A1文字は補足的な(BMP以外の)記号です。他のすべてのシンボルはBMP文字なので、バグの影響を受けません。私はa tool to help you with CSS escapesをまた作った、とあなたは非BMP文字を入力した場合には警告を出し

関連する問題