Почему один шрифт работает в 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", которое не должно быть указано дважды. Не знаю, почему это сработало бы для "Моего", а не для "Запада"...