Как запретить IE7 загружать все файлы EOT, используемые для объявления шрифтов?
Мне нужна помощь здесь Мы используем нестандартные шрифты (нестандартные шрифты) для нашего сайта и используем следующее объявление 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 (как объявлено / используется в объявлениях шрифтов), даже если страница, загруженная в настоящее время в браузере, использует только один или два варианта шрифта.
Посоветуйте, пожалуйста, что нам не хватает / что нужно изменить, чтобы решить эту проблему?
1 ответ
Вы можете использовать условные комментарии для этого через сниффинг версии браузера.
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 для 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 для 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 для 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 также может загружать их, даже если они ему не нужны.