Internet Explorer уже давно надоедает Web-разработчикам своими багами и несоответствием современным стандартам.

Хоть много багов и исправлено в IE9, но всё равно он не так популярен, как IE8. Об IE7 я даже боюсь говорить.

Суть поста в том, что IE8 все-таки можно заставить соответствовать современным Web-технологиям. В нашем случае — это теги HTML5.


HTML5 Элементы


У HTML5 есть целый набор новых элементов, например, header для отделения шапки сайта и footer для отделения подвала.

Так как IE8 ничего не знает о них, он не будет распознавать их стили из CSS. К счастью, есть простой способ — просто добавить недостающие элементы к DOM страницы:

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->


Другая проблема состоит в том, что элементы HTML5 выводятся как блок по умолчанию, но IE8 не знает и этого. Чтобы побороть эту проблему, нужно лишь добавить в CSS:

header, nav, section, article, aside, footer {
   display:block;
}


Веб-шрифты


Веб-шрифты уже приличное время используются разработчиками и даже есть несколько больших ресурсов, с помощью которых можно подключить их: Google fonts, Type Kit, Font Squirrel. Кроме текста, веб-шрифты могут быть очень полезными для значков или иконок соц. сетей.

Для использования веб-шрифтов нужно в CSS добавить правило @font-face:

@font-face {
    font-family: 'My Font';
    src: url('fonts/Myfont.eot');
}
 
h1 {
    font-family: 'My Font';
}


В этом примере я завёл новое “семейство шрифтов” и обозвал его “My Font”, также указал расположение шрифта на относительно css-файла. Это позволит при описании стилей использовать этот шрифт.

IE8 всё же не всегда обрабатывает подоные конструкции и отображает системный шрифт вместо задуманного.

Чтобы такого не возникало, можно использовать сразу несколько типов файлов со шрифтами. Браузерами поддерживаются следующие типы файлов со шрифтами:
  • Embedded Open Type (EOT)
  • TrueType (TTF)
  • OpenType (OTF)
  • Scalable Vector Graphics (SVG)
  • Web Open Font Format (WOFF)


Из всех перечисленных, WOFF сейчас становится стандартом. Он поддерживается многими браузерами (Chrome, Firefox (выше 3.6), Opera, Safari и IE9).

Конечно же, IE8 ничего не знает о WOFF и поддерживает лишь EOT. Значит чтобы использовать веб-шрифт, который хотим показать и пользователям IE8 как и в других браузерах, нужны файлы в форматах WOFF и EOT.

Ну и тут все не в порядке, у IE8 есть ошибка, которая препятствует загрузке нескольких форматов одного и того же шрифта. К счастью, есть хак, который это исправляет.

На помощь пришли парни из Font Spring (ссылка выше):

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont-Light-webfont.eot');
    src: url('fonts/MyWebFont-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyWebFont-Light-webfont.woff') format('woff'),
         url('fonts/MyWebFont-Light-webfont.ttf') format('truetype'),
         url('fonts/MyWebFont-Light-webfont.svg#MyWebFontLight') format('svg');
    font-weight: 300;
    font-style: normal;
}


В этом примере шрифт называется MyWebFont и представлен сразу в нескольких форматах (EOT, WOFF, TTF и SVG).

* SVG используем на всякий случай, если юзер использует мобильный Safari (iPhone/iPad) до версии 4.1

Ну а для полного использования шрифта, нужно описать все виды. Например я использую лишь 4:
  • 300, normal
  • 300, italic
  • 600, normal
  • 600, italic


Ну или описать их можно так::

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont-LightItalic-webfont.eot');
    src: url('fonts/MyWebFont-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyWebFont-LightItalic-webfont.woff') format('woff'),
         url('fonts/MyWebFont-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/MyWebFont-LightItalic-webfont.svg#MyWebFontLightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}
 
@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont-Bold-webfont.eot');
    src: url('fonts/MyWebFont-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyWebFont-Bold-webfont.woff') format('woff'),
         url('fonts/MyWebFont-Bold-webfont.ttf') format('truetype'),
         url('fonts/MyWebFont-Bold-webfont.svg#MyWebFontBold') format('svg');
    font-weight: 600;
    font-style: normal;
}
 
@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont-BoldItalic-webfont.eot');
    src: url('fonts/MyWebFont-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/MyWebFont-BoldItalic-webfont.woff') format('woff'),
         url('fonts/MyWebFont-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/MyWebFont-BoldItalic-webfont.svg#MyWebFontBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
}


Ну и напоследок, посмотрите сервис, в котором Вы можете сгенерировать шрифт во всех форматах веб-шрифтов.

P.S. В комментариях указывают на то, что решение работает и для более ранних версий IE.