1

@font-face を使用して独自のフォントを定義しています。

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_regular-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_regular-webfont.woff') format('woff'),
         url('fonts/helvlight_regular-webfont.ttf') format('truetype'),
         url('fonts/helvlight_regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_bold-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_bold-webfont.woff') format('woff'),
         url('fonts/helvetica_bold-webfont.ttf') format('truetype'),
         url('fonts/helvlight_bold-webfont.svg#webfont') format('svg');
    font-weight: bold;
    font-style: normal;
}

font-face ルールは Font Squirrel で生成され、その後 font-weight と font-style ルールを追加しました。次のように、CSS でカスタム フォントを使用します。

body {
    font: 16px HelveticaNeue, Verdana, sans-serif;
    color: black;
}

h1 {
    font-weight: bold;
    font-size: 2em;
}

Chrome、Firefox、Opera、Safari では正常に動作しますが、Internet Explorer では動作しません。

私はこの@font-face を IE8 で試してみましたが、IE9 ではうまくいきませんでした。

また、ボールド スタイルの font-face 名を HelveticaNeueBold に変更して、次のように使用しようとしました。

h1 {
    font-family: HelveticaNeueBold;
    font-size: 2em;
}

それは機能しますが、これはもちろん私が望むものではありません。また、太字の後に !important を追加しても役に立ちませんでした。私が間違っていることは何か提案はありますか?

4

1 に答える 1

3

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

詳細については、こちらをご覧ください: @font-face IE9 font-weight does not work

于 2013-08-08T14:16:24.450 に答える