Добавляем поддержку тегов HTML5 и Web Fonts для Internet Explorer 8

    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.
    Поделиться публикацией

    Комментарии 34

      0
      Интересный подход, а в более ранних версиях такое работает?
      • НЛО прилетело и опубликовало эту надпись здесь
        +2
        Пора вводить микроблоги на хабре.
          –2
          Не могли бы Вы пояснить эту свою мысль? А не то я её вовсе не понял.
            +2
            Когда был написан этот комментарий статья представляла собой один маленький абзац и кусок когда 'if ie9'.
              0
              О как.
          +3
          Ну, так скажем, вы далеко не пионер в этом деле.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Да я не порицаю (и минусов не ставил), просто я понял посыл автора, как некую уникальность, до которой никто еще не додумался.
              • НЛО прилетело и опубликовало эту надпись здесь
            +8
            Капитан Очевидность поперхнулся от зависти, прочитав эту статью.
              +1
              Прорыв! Инновации! Нано-технологии в действии.
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Про ВШ передумал писать =) Google Web Fonts сам всё делает и не нужно заморачиваться о кроссбраузерности.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      ОК Чуть позже допишу.
                      Только вот за минусы обидно.
                      • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  по моему только глухой верстальщик об этом трюке не слышал
                    0
                    Часто Вы верстаете HTML5?
                      –1
                      Верстать html?
                        –2
                        редко
                          +1
                          Давно пора переходить
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            Непрерывно.
                              +1
                              Всегда
                            0
                            Вообще-то, все решения прекрасно работают как минимум с 6 версии IE
                              0
                              Ориентируемся на статистику IE по миру.
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Я не говорю о статистике, просто можно было сказать, что данные решения работаю и в более ранних версиях.
                                0
                                об сервисе fontsquirrel.com тоже кстати уже топика 3 написано :)
                                  0
                                  Интересная статистика, 19 добавили в избранные и 14 из них загнали в минус.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Спасибо за линк. Думаю, самым простым решением будет присваивание разным шрифтам разных имен
                                      +1
                                      Прежде, чем начать писать, вам бы стоило начать читать. Всё, о чём вы только что рассказали, давно раскрыто на профильных сайтах.

                                      По терминологии: элементы из HTML5 (не теги), веб-шрифты (термин вполне употребим)

                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                      Самое читаемое