私は3つの異なるフォントを使用しています。これが私の@fontfaceです
@font-face {
font-family: 'Mikadan-Regular';
src: url('../fonts/mikadan/eot/style_134713.eot');
src: url('../fonts/mikadan/eot/style_134713.eot?#iefix') format('embedded-opentype'),
url('../fonts/mikadan/woff/style_134713.woff') format('woff'),
url('../fonts/mikadan/ttf/style_134713.ttf') format('truetype'),
url('../fonts/mikadan/svg/style_134713.svg#Mikadan-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MuseoSans500';
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot');
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museosans_500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MuseoSlab500';
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot');
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.woff') format('woff'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.ttf') format('truetype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
font-weight: normal;
font-style: normal;
}
1番目と3番目は問題なく動作します。
2 つ目は body タグに次のように指定されます。
body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}
これは Chrome と Safari で完全に正常に動作します
ただし、Opera 11.50 と Firefox 4.0.1 では悪いニュースです。フォント スタック全体が機能せず、フォントはプレーンな古いセリフとしてレンダリングされます (ヤッ!)
問題は Museo にあると思います。Museo をフォント スタックから取り出すと、正しくレンダリングされます。
Windows 7 でこれらのブラウザーを使用しています。