Поддерживают ли IE браузеры (IE6, 7, 8) @font-face?

В соответствии с этой статьей http://www.standardista.com/css3/font-face-browser-support IE поддерживает @font-face, но я не смог найти какой-либо сайт, на котором действительный пользовательский шрифт работает для IE

Кроме того, если IE поддерживает пользовательский шрифт через @font-face с раннего (IE6), то почему люди все еще используют cufon?

Любые пояснения или примеры?

Ответ 1

Старая версия Internet Explorer поддерживает Файлы с встроенным OpenType (EOT) до @font-face, формализованные в CSS3. Вы можете найти совместимые файлы на сайтах, например FontSquirrel или Google Font API. Инструмент преобразования FontSquirrel также должен помочь здесь. Также стоит прочитать последний пуленепробиваемый синтаксис, рекомендованный fontspring, для встраивания нескольких файлов для нескольких браузеров.

Тот факт, что до недавнего времени это часто не использовался, является двукратным; сначала есть юридические проблемы с использованием шрифтов @font-face - авторские права, чтобы быть конкретными. В отличие от cufon, который сохраняет только шрифты, @font-face вы сами передаете сами шрифты, что имеет юридические последствия.

Другая проблема - поддержка в других браузерах. Firefox 3 был последним из современных браузеров, чтобы каким-то образом не поддерживать @font-face, поэтому до выпуска Firefox 3.5 в середине 2009 года @font-face все еще не был жизнеспособным. Помимо всего этого существуют различия в поддержке формата между браузерами, поэтому развитие технологии происходит медленно.

Ответ 2

В Internet Explorer 9 требуется шрифт типа EOT. Шрифты TTF могут использоваться в большинстве других версий браузера и SVG для таких устройств, как iPhone и iPad. Подробнее о поддержке браузера для @font-face вы можете узнать здесь http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Font Squirrel также является отличным ресурсом для создания файлов веб-шрифтов, включая EOT, из существующих файлов шрифтов. Убедитесь, что у вас есть лицензия на использование шрифтов в Интернете. Здесь вы можете получить доступ к файловому генератору бесплатных веб-шрифтов: http://www.fontsquirrel.com/fontface/generator

Типичная запись CSS для набора @font-face выглядит следующим образом:

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

Затем вы можете вызвать свой шрифт, назначив атрибут "font-family" с помощью css

.my-class { font-family: "custom-font" }

Ответ 3

Вы также можете написать:

@font-face {
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.eot');
}
@font-face { 
    font-weight: normal;
    font-style: normal;
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.woff') format('woff'),
         url('/some/directory/custom-font.ttf') format('truetype'),
         url('/some/directory/custom-font.svg#webfont') format('svg');
}

Работает так же, как и выше, без использования "?" знак.

Ответ 4

Да, они начинаются с IE6 *. Рабочий пример.

Шрифт должен следовать некоторым специальным правилам, хотя, например, имя шрифта должно начинаться с имени семейства, а фамильное имя в CSS должно совпадать с фамилией шрифта.

Если вы используете шрифт squirrel webfont generator для генерации .eot из .ttf, он гарантирует, что сгенерированный .eot можно использовать на IE6.

* Остерегайтесь проблем с псевдонимом с настройкой пользовательских шрифтов в IE6/7/8.