如何防止IE7下载用于字体声明的所有EOT文件? [英] How to prevent IE7 from downloading all EOT files used for font-face declaration?
问题描述
我在这里需要一些帮助.我们正在为网站使用自定义字体(非标准字体)，并使用以下字体声明(在全局CSS中声明):
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;
}
到目前为止，它的表现超出了我们的预期……除了IE7的一个问题.
So, far it has performed above our expectations… except one issue with IE7.
由于某些原因，即使当前在浏览器中加载的页面仅使用一种或两种字体版本，IE7也会下载所有EOT文件(如在字体外观声明中声明/使用的那样).
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?
推荐答案
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>
font-face-lte8.css的CSS:
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;
}
font-face-gte9.css的CSS
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;
}
font-face-allothers.css的CSS
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也可以下载这些文件，即使他不需要它们.
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.
这篇关于如何防止IE7下载用于字体声明的所有EOT文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
