How to prevent IE7 from downloading all EOT files used for font-face declaration?

问题

I need some assistance here. We are using custom fonts (non-standard fonts) for our site and use the following font-face declaration (declared in our global 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;
    }

So, far it has performed above our expectations… except one issue with IE7.

For some reason IE7 downloads all EOT files (as declared/used in font-face declarations), even though the page currently loaded in the browser, only used one or two font variations.

Please advise, what are we missing/what needs to be changed to fix this issue?

回答1:

You can use Conditional Comments for it via sniffing the browsers version.

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>

CSS for font-face-lte8.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;
}

CSS for font-face-gte9.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;
}

CSS for font-face-allothers.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;
}

This will solve the problem.
For info: IE9 supports TTF and WOFF files, so IE9 may download these too, even if he didn't need them.

来源：https://stackoverflow.com/questions/10804502/how-to-prevent-ie7-from-downloading-all-eot-files-used-for-font-face-declaration

标签

internet-explorer-7

font-face

eot