6

今週、@font-face構造体を使用して EOT フォント ファイルを埋め込む際に、IE7 のかなり奇妙なバグ (驚き、驚き) に遭遇しました。

帯域幅を節約するために、サイトで使用されないことがわかっているフォントの文字セットを編集することがよくあります。この特定の例では、すべてタイトル ケースで構成されたヘッダーにこのフォントを使用していましたが、text-transformプロパティを使用して大文字で表示されていました。論理的には、小文字を使用しないため、すべてのフォント ファイルを大文字のみで保存しました。

@font-faceこのサイトは、IE7 を除いて、この構造をサポートするすべてのブラウザー (IE6 および IE8 を含む) で完全にレンダリングされました。IE7 では、各単語の最初の文字のみが適切なフォントで表示され、残りの文字はブラウザのデフォルト フォントで表示されていました。

頭を悩ませていると、text-transformプロパティが展開され、文字が大文字で表示されていたとしても、ヘッダーは実際にはタイトル ケースとして記述されている (したがって小文字が含まれている) ため、IE7 では EOT ファイルに小文字が存在する必要があることがわかりました。大文字を表示します。（直感ですよね？）

簡単な修正は、大文字と小文字の両方のグリフを使用して EOT ファイルを再構築することでした。ただし、小文字は使用されていません。

どうすればこれを適切に修正できますか? (つまり、フォントに小文字のグリフを含めなくても、IE7 が大文字をレンダリングするようにします。)

ありがとう！

4

3 に答える 3

4

あなたはすでに最善の解決策を持っていると思います。大文字と小文字の両方のグリフを.eot.

サーバーは HTTP 圧縮を使用しています。

現在.eotは22.62 KBで、 まで圧縮されてい13.87 KBます。

大文字のグリフを追加するとサイズが2 倍~28 KBになったとしても、圧縮されるだけです。

問題に対する単純な「実際の修正」がない限り、これに固執してください。

于 2011-06-17T09:34:35.850 に答える
1

サーバー側でケースを変換するオプションはありますか? たとえば、php には次のようなものがあります: http://php.net/manual/en/function.strtoupper.php

そのような関数を使用することが実際的である場合、IE7 の問題が解決される可能性があります。

于 2011-06-17T09:26:39.337 に答える
0

aは同じ問題を抱えていて、すぐに解決しました：

ie7がテキスト変換「大文字」でフォントを正しくレンダリングするには、小文字がフォントファイルで定義されていることで十分です。実際の文字を含める必要はありません=フォントファイルの小文字はできます空であり、フォントのサイズは増加しません。

于 2011-07-13T11:02:34.197 に答える