0

問題:

IE8 では、h1.startpage-heading は「Roboto」、font-weight 100 にする必要があります。可能であれば、IE7 でも可能です。

バックグラウンド:

SO とhttp://code.google.com/p/googlefontdirectory/issues/detail?id=9を読みました(投稿 #13 を参照してください)。

IE8 を対象とする CSS ファイルに @font-face 宣言を入れました。@font-face で、フォントの名前を「RobotoThin」に変更しました。次に、宣言された font-face を同じ IE8-CSS ファイルで使用します。

@font-face {
    font-family: 'RobotoThin';
    font-style: normal;
    font-weight: 100;
    src: url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot);
    src: local('Roboto Thin'), local('Roboto-Thin'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.startpage-heading {
    font-family: 'RobotoThin';
    color:red;
}

場合:

IE8 でページをロードすると、正しいフォントが短時間表示された後、他のフォント ファミリ宣言によって上書きされます (ただし、テキストはまだ赤です)。IE 開発ツールで見出しを調べると、要素は正しい CSS 宣言から継承されているようです。

その他の背景:

IE8-CSSで「RobotoThin」の後に!importantを入れてみたところ解決しませんでした。

ありがとう!

4

1 に答える 1