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

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

10 голосов
/ 26 февраля 2011

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

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

Есть какие-нибудь пояснения или примеры?

Ответы [ 4 ]

13 голосов
/ 26 февраля 2011

Старая версия 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 все ещене жизнеспособен.Помимо всего этого существуют различия в поддержке формата между браузерами, поэтому разработка технологии идет медленно.

5 голосов
/ 20 сентября 2012

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" }
1 голос
/ 28 октября 2014

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

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

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

* Помните, что существуют проблемы с алиасами с отображением пользовательских шрифтов в IE6 / 7 / 8.

1 голос
/ 01 июня 2013

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

@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');
}

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

...