0

css @font-face でフォントを埋め込もうとしました。そして、太字フォントとして使用したいです。しかし、IE 9 ではフォントが太字で表示されません。

CSS

@font-face {
    font-family: Dauphin;
    src: url('dauphin.woff'),
         url('dauphin.ttf'),
         url('dauphin.eot'),
         url('dauphin.svg')
     ; /* IE9 */
     font-weight: normal;
}
.p {
     font-family: Dauphin;
     font-weight: 900;
}
4

1 に答える 1

7

IE は、ルールfont-weightで指定された以外の使用をサポートしていません。@font-face

各フォント バリアントのフォント ファイルのセット

通常、埋め込みフォント ファイルには、1 つの太さと 1 つのスタイルのみを持つバージョンのフォントが含まれています。複数のフォント バリアントが必要な場合は、フォント バリアントごとに異なる埋め込みフォント ファイルのセットが使用されます。以下の例では.woff、単純化するためにフォーマットのみが使用されています。実際には.eot、 、.ttf、および.svgも通常使用されます。

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
    font-weight: normal;
}
@font-face {
    font-family: 'myFont';
    src: url('myFontBold.woff');
    font-weight: bold;
}
...
p {
    font-family: myFont;
    font-weight: normal;
}
h2 {
    font-family: myFont;
    font-weight: bold;
}

IE8のサポート

ただし、IE8 では、複数のウェイト、または 4 つを超えるウェイトまたはスタイルが font-family に関連付けられている場合、表示の問題があります。IE8 をサポートするには、フォント バリアントごとに異なる font-family を使用します。

@font-face {
    font-family: 'myFont';
    src: url('myFont.woff');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.woff');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}

クロスブラウザーの最大サポート

最適な量のクロスブラウザー サポートを得るには、次の構文を使用します。

@font-face {
    font-family: 'myFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix')
             format('embedded-opentype'),
         url('myFont.woff') format('woff'),
         url('myFont.ttf') format('truetype'),
         url('myFont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: 'myFont-bold';
    src: url('myFontBold.eot');
    src: url('myFontBold.eot?#iefix')
             format('embedded-opentype'),
         url('myFontBold.woff') format('woff'),
         url('myFontBold.ttf') format('truetype'),
         url('myFontBold.svg#svgFontName') format('svg');
}
...
p {
    font-family: myFont;
}
h2 {
    font-family: myFont-bold;
}
于 2013-03-29T17:27:22.777 に答える