Почему один шрифт работает в IE, а другой нет

HTML

<span style="font-family: 'blackjackregular'; font-size: 18pt;">My</span>
<span style="font-family: 'trajanpro'; font-size: 14pt;">WEST</span>

Шрифт CSS:

@font-face {
    font-family: 'trajanpro';
    src: url('trajanpro-regular.eot');
    src: url('trajanpro-regular.eot?#iefix') format('embedded-opentype'),
         url('trajanpro-regular.woff') format('woff'),
         url('trajanpro-regular.ttf') format('truetype'),
         url('trajanpro-regular.svg#trajanpro_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

IE показывает:

введите описание изображения здесь

FF и Chrome Shows:

введите описание изображения здесь

Как вы можете видеть, MY корректен как в IE, так и в других браузерах, но почему WEST не меняет шрифт в IE?

2 ответа

Решение

Trajan Pro является фирменным шрифтом Adobe и может не иметь лицензии для встраивания его в качестве веб-шрифта. Встраивая это с @font-face вероятно нарушает лицензионное соглашение. Чтобы использовать его, вам нужно использовать такой сервис, как Typekit. Пожалуйста, смотрите подробности здесь: https://typekit.com/fonts/trajan-pro-3

РЕДАКТИРОВАТЬ:

После еще одной копки вот интересная ссылка, в которой говорится, что IE внедряет флаг в EOT-файлах, ограничивающий использование шрифтов. Другие браузеры не реализуют эту функцию или не планируют, следовательно, различия в поведении.

Кажется, это флаги EOT на шрифте, который применяет IE, когда другой браузер этого не делает, как сказал Яцек Глен.

Вы должны проверить бесплатный эквивалент Trajan, например Cinzel: http://www.google.com/fonts/specimen/Cinzel

Я не уверен, но попробуйте это:

@font-face {
font-family: 'trajanpro';

src: url('trajanpro-regular.eot?#iefix') format('embedded-opentype'),
     url('trajanpro-regular.woff') format('woff'),
     url('trajanpro-regular.ttf') format('truetype'),
     url('trajanpro-regular.svg#trajanpro_regular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'blackjackregular';

src: url('blackjar-webfont.eot?#iefix') format('embedded-opentype'),
     url('blackjar-webfont.woff') format('woff'),
     url('blackjar-webfont.ttf') format('truetype'),
     url('blackjar-webfont.svg#blackjackregular') format('svg');
font-weight: normal;
font-style: normal;
}

Я только что удалил первое свойство "src", которое не должно быть указано дважды. Не знаю, почему это сработало бы для "Моего", а не для "Запада"...

Другие вопросы по тегам