0

ここで助けが必要です。私たちはサイトにカスタムフォント（非標準フォント）を使用しており、次のfont-face宣言（グローバルcssで宣言されています）を使用しています。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.eot'); /* IE9 Compat Modes */
    src: url('webfontbold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfontbold.woff') format('woff'), /* Modern Browsers */
         url('webfontbold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontbold.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
    }

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.eot'); /* IE9 Compat Modes */
    src: url('webfontitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfontitalic.woff') format('woff'), /* Modern Browsers */
         url('webfontitalic.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontitalic.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: italic;
    }

これまでのところ、IE7の1つの問題を除いて、期待を上回っています。

何らかの理由で、IE7はすべてのEOTファイル（font-face宣言で宣言/使用）をダウンロードしますが、現在ブラウザーに読み込まれているページでは、1つまたは2つのフォントバリエーションしか使用されていません。

何が欠けているのか/この問題を修正するために何を変更する必要があるのか​​、アドバイスしてください。

4

1 に答える 1

2

ブラウザのバージョンをスニッフィングすることで、条件付きコメントを使用できます。

HTML:

<html>
    <head>
        <title>Example</title>

        <!--[if lte IE 8]> <link rel="stylesheet" href="font-face-lte8.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
        <!--[if gte IE 9]> <link rel="stylesheet" href="font-face-gte9.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
        <link rel="stylesheet" href="font-face-allothers.css" type="text/css" media="" title="" charset="utf-8">

    </head>
</html>

font-face-lte8.css の CSS:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: normal;
    font-style: italic;
}

font-face-gte9.css の CSS

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.eot'); /* IE9 Compat Modes */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.eot'); /* IE9 Compat Modes */
    font-weight: normal;
    font-style: italic;
}

font-face-allothers.css の CSS

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.woff') format('woff'), /* Modern Browsers */
         url('webfontbold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontbold.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.woff') format('woff'), /* Modern Browsers */
         url('webfontitalic.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontitalic.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: italic;
}

これで問題は解決します。
情報: IE9 は TTF および WOFF ファイルをサポートしているため、IE9 はこれらのファイルを必要としない場合でもダウンロードする可能性があります。

于 2012-06-04T15:50:46.063 に答える