問題:
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を入れてみたところ解決しませんでした。
ありがとう!