2012-01-13 5 views
3

私はChromeとIE9から胸が張り裂ける異なるテキストを取得:Google Chromeで特定のUnicode文字がレンダリングされないのはなぜですか?同じフォント(ゴシック)を使用して、同じマシン上

<html> 
<head> 
</head> 
<body style="font-family: Arial;"> 
IIIIIIIII&#x2AF8; 
IIIIIIIII&#x2B46; 
IIIIIIIII&#x2A20; 
IIIIIIIII&#x27A4; 
IIIIIIIII&#x27A7; 
IIIIIIIII&#x269E; 
IIIIIIIII&#x25B6; 
</body> 
</html> 

それは次のようになります。 enter image description here

これはなぜ起こるのでしょうか? ChromeでIEで正しくレンダリングされる2つの破線矢印を正しくレンダリングする方法はありますか? (位置1と3)

+0

私はちょうどあなたのhtmlをクロムで見ました - 2と6のように見えますが私に壊れたものです! –

+0

編集: "...正しくIEで正しく表示される2つの破線の矢印をレンダリングしますか?" – usr

答えて

4

あなたのCSSプロパティ名は、font-familyではなく、font-familiyの入力ミスをしているので、宣言は無視されます。ただし、Arialには使用される特殊文字が含まれていないため、宣言はレンダリングにはあまり影響しません。これは、ブラウザが異なるフォントからグリフを拾い上げようとすることを意味し、その方法はここで異なる場合があります。 IEは多くの場合、これをやっていないことで有名です。システム内のフォントには文字が含まれていることがあります。

レンダリングを改善するには、一般的に使用可能なフォントの異なる文字に対するサポートを分析し、font-familyプロパティの値として適切なリストを書き込む必要があります。さまざまな文字を別のリストに定義して、span(または、なぜなら、font)の要素の中にラップすることができます。例えば

記載されたものに加えて http://www.fileformat.info/info/unicode/char/2af8/fontsupport.htm でカンブリア数学フォントがあまりにも、それが含まれていますが、最初の特殊文字U + 2AF8(&#x2AF8;)は、わずか数フォントに存在しています。それは

font-family: Cambria Math, Symbola, Quivira, STIX, Code2000; 

ます。また、1.3のように、合理的な値に(pのような)外側のブロック要素のline-heightプロパティを設定する必要があるためだからあなたが使用することができます。さもなければ、カンブリア数学の固有の線の高さが非常に大きいため、線の間隔が広すぎることがあります。

+0

あなたの最初の行に関するFYI。 OPはしばらく前に修正されました。 – Sparky

+0

これが正しいことを確認しました。ありがとう!とにかくそれを動作させる方法はありますか?私は、Googleの検索結果で、メタ記述がすばらしく見えるようにしようとしています。彼らは次の宣言を設定しました:font-family:arial、sans-serif; – usr

+0

したがって、私はこのフォント仕様に厳密に制限されています。 – usr

1

あなたのHTMLコードにはDoctype宣言がありませんが、さらに重要なことに、文字セット宣言がありません。

詳細については、この記事を読む:

The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

EDIT:それは、これらの特定の文字はOS /ブラウザのさまざまなデフォルトのフォントセットから欠落している可能性が高いです。適切なフォントを宣言できますが、ユーザーのシステムにインストールされていない場合は、この問題は解決しません。私は正しいと信じているJukkaの答えのコードをテストしました。私のシステムにこれらのフォントがインストールされていないのでSafari Macで動作させることはできません。

+0

これは問題ではありません。 Chromeでこのページをご覧ください:http://jsbin.com/eyefab/edit#javascript,html –

+0

UTF-8宣言を追加し、ファイルがそのまま保存されることを確認しました。念のため。 – usr

+0

@usr、それはいい考えです。私の編集を参照してください。 – Sparky

関連する問題