2

@font-faceIE7に問題があります。文字-が正方形で表示されます。このスクリーンショットを参照してください。通常のテキストやその他の特殊文字&、/など+が正しく表示されます。

IE8も含め、テストしたすべてのブラウザーで期待どおりに機能します。

誰かが以前にこれに遭遇し、おそらく解決策を知っていますか？

フォントの読み込みに使用するCSSは次のとおりです。両方text-transform:uppercase/lowercaseを使用して、それが問題であるかどうかを確認しました。

@font-face {
font-family: 'rex-bold';
src: url('fonts/rex_bold-webfont.eot');
src: url('fonts/rex_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/rex_bold-webfont.woff') format('woff'),
    url('fonts/rex_bold-webfont.ttf') format('truetype'),
    url('fonts/rex_bold-webfont.svg#rex_bold_bold') format('svg');
font-weight: normal;
font-style: normal;
}
4

1 に答える 1

2

これはRexフォントの問題のようです。「-」HYPHEN-MINUSU+ 002D（つまり、一般的なAsciiハイフン）は含まれていません。これは、ブラウザがその文字を別のフォントから取得する必要があることを意味します。スクリーンショットから、ハイフンのデザインが異なり、文字のようにストロークが細くなっていることがわかります。結果はブラウザとその設定によって異なる可能性があり、IEの古いバージョンはここで悪名高いことで有名です。システムにそれをカバーするフォントがある場合でも、文字をまったくレンダリングできず、代わりに小さな長方形が表示される場合があります。

これを修正するには、いくつかの代替フォントを設定します。

font-family: rex-bold, Tahoma, Verdana, sans-serif;

ハイフンがRexBoldのデザインと一致するようにフォントを選択します。これは完璧ではありませんが、注意を払えば、ほとんどのブラウザでより良いレンダリングが得られます。

Rex Boldはすべて大文字で設計されているため、ハイフンも大文字にする必要があります。TahomaとVerdanaがそうするかもしれません。一部の最新のフォントではfont-feature-settings、プロパティを使用して、（ブラウザーの接頭辞付きの形式で）使用可能な場合にそのようなバリアントグリフを選択できる場合がありcaseます。このような設定の効果をテストするための簡単なテストページを作成しました。ただし、ほとんどのフォントにはそのような優れた機能がないため、ハイフングリフが「十分に高い」（そして十分に太字である）フォントを選択する必要があります。

于 2012-10-19T10:27:57.073 に答える