css - шрифта - шрифты html




Пользовательский шрифт иногда выделяется курсивом в IE8/IE7 (2)

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

Пример:

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

В 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;
}

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

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

Есть ли способ решить эту проблему без полного удаления курсивов?

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


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