Question

我需要一些帮助。我们为我们的网站使用自定义字体（非标准字体）并使用以下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的一个问题。

出于某种原因IE7下载所有EOT文件（如在font-face声明中声明/使用），即使当前在浏览器中加载的页面只使用了一个或两个字体变体。

请告知，我们缺少什么/需要更改什么才能解决此问题？

Answer 1

您可以通过嗅探浏览器版本来使用Conditional Comments。

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;
}

这将解决问题。
对于信息： IE9支持TTF和WOFF文件，因此IE9也可以下载，即使他不需要它们。

如何防止IE7下载用于font-face声明的所有EOT文件？

1 个答案: