Пользовательский шрифт иногда отображается курсивом в IE8/IE7.

В IE7 и IE8 при использовании пользовательского веб-шрифта текст иногда отображается курсивом, даже если я явно установил font-style: normal. Проблема носит спорадический характер - несколько раз все отображается нормально, затем я обновляю, и все выделено курсивом, затем обновляю, и все возвращается в нормальное состояние.

Я использую это объявление @font-face:

@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DIN';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

Есть комментарий к эта статья указывает на то, что дело может быть в порядке объявлений @font-face: однако единственное, что решило проблему, это удаление выделены курсивом.

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

Есть ли способ решить эту проблему, не удаляя полностью курсивные объявления?

ОБНОВЛЕНИЕ: при дальнейшем расследовании выяснилось, что эта проблема затрагивает и IE8, а не только режим совместимости.


css font-face internet-explorer-8 italic internet-explorer-7
person Adam Sharp    schedule 09.07.2012    source источник
comment
Вы не предоставили свой HTML-код, который используется. Старайтесь использовать уникальные @font-face фамилии. Пример: DINnormal, DINbold, DINitalic, DINboldItalic. Просмотрите пример CSS и HTML в этом ответе SO. Если создание уникальных имен решит вашу проблему, я сделаю ответ. Ваше здоровье!   -  person arttronics    schedule 10.07.2012
comment
@arttronics спасибо, оказывается, уникальные названия семейств шрифтов действительно решили проблему. Если вы напишете ответ, я приму его.   -  person Adam Sharp    schedule 03.09.2012
comment
Адам Шарп, рад, что это сработало для вас ... Я отправил ответ. Ваше здоровье!   -  person arttronics    schedule 04.09.2012

Ответы (3)


arrow_upward
8
arrow_downward

Для каждого из ваших @font-face font-family имен создайте собственное имя.

Пример:

@font-face {
    font-family: 'DINnormal';
    src: url('fonts/DINWeb.eot');
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DINbold';
    src: url('fonts/DINWeb-Bold.eot');
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DINitalic';
    src: url('fonts/DINWeb-Ita.eot');
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DINboldItalic';
    src: url('fonts/DINWeb-BoldIta.eot');
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
         url('fonts/DINWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

После того, как эти правила CSS определены, вы можете включить конкретное правило CSS:

li {
  font: 18px/27px 'DINnormal', Arial, sans-serif;
}
person arttronics    schedule 03.09.2012

arrow_upward
4
arrow_downward

Если вы, как и я, столкнулись с этим вопросом, столкнувшись с похожей проблемой при использовании шрифтов TypeKit, эта запись из блога TypeKit объясняет, как вы можете указать уникальные font-family имена для каждого веса и стиля шрифта TypeKit для адресации Это.

person poisontofu    schedule 06.03.2013
comment
Я могу поддержать это. Я наткнулся на этот комментарий, и он помог мне решить проблемы, с которыми я столкнулся при использовании Typekit. Спасибо чувак. - person Doidgey; 11.11.2013

arrow_upward
1
arrow_downward

У меня была похожая проблема, веб-шрифт отображался курсивом при использовании IE8 (эмулятор), после копания и копания я наткнулся на статью, в которой говорится, что эмулятор иногда может вводить в заблуждение, особенно когда речь идет о веб-шрифтах, и что он предложил попробовать сайт в реальном IE8, так как я использую машину с Windows 7, я не смог загрузить реальную вещь, поэтому я использовал этот сайт под названием http://www.browserstack.com/ (Никаких тестировщиков или поддельных браузеров. Тестируйте в реальных браузерах, включая Internet Explorer 6, 7, 8, 9, 10 и 11.)

и я заметил, что мой шрифт больше не был курсивом: D

Вот ссылка на статью, которую я прочитал,

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

Надеюсь, это поможет вам, ребята, если бы я наткнулся на что-то подобное при исследовании, это действительно сэкономило бы мне несколько часов.

person Dally S    schedule 04.06.2014