Использовать другой шрифт только в Internet Explorer

У меня серьезные проблемы с использованием пользовательского лица в Internet Explorer.

Сейчас я использую определенный шрифт с шрифтом, и он отлично работает в современном браузере, но я просто не могу заставить его работать в IE.

Метод, который я использую для шрифта в Chrome, Firefox и т. д., следующий:

font-family: xy;
src: url(fonts/xy.otf);

}

Есть ли способ, которым IE использует другой шрифт?

font-family: xy, iefont, sans; не работает, потому что тип шрифта указан во многих css и местах,

* {font-family: xy, iefont, sans !important} не работает, потому что он удаляет семейство "FontAwesome", указанное ранее.

Как проще всего отформатировать каждый текст, но только для IE?


css internet-explorer font-family
person Richard Zilahi    schedule 26.04.2014    source источник
comment
Пользовательские файлы шрифтов имеют некоторые проблемы с отображением в IE, если вы используете Google Fonts, я думаю, вы не увидите таких проблем.   -  person Zafar    schedule 26.04.2014
comment
Буквальный ответ: добавьте правило для IE. Смотрите другие ответы, это не лучший способ.   -  person Jongware    schedule 26.04.2014

Ответы (3)


arrow_upward
2
arrow_downward

CSS для IE

Для конкретных файлов css для браузера я бы рекомендовал:

Простое решение, просто используйте эту JS-библиотеку, и вы сможете легко применять стили для каждой комбинации браузера/ОС:

BrowserClass.js

При этом вы получите имя класса в теге body с текущим именем и версией браузера, а также с используемой ОС.

После включения файла:

<script src="js/browserclass.js"></script>

Например, в Windows 8.1 с последней версией ie вы увидите:

<body class="ie ie11 win desktop">

И в вашем файле стиля вы можете сослаться на: (стиль .sass)

body.ie
  +declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)

Примечание. Условные комментарии в IE работают только до IE9!

SASS миксин

Или, если вы используете SASS, вот хороший миксин:

// ---------------------
// Font Face Mixin
// ---------------------
=declare-font-face($font-family, $font-filename, $font-weight: normal, $font-style: normal, $font-stretch: normal)
  @font-face
    font-family: #{$font-family}
    src: url("../fonts/#{$font-filename}.eot")
    src: url("../fonts/#{$font-filename}.eot?#iefix") format("embedded-opentype"), url("../fonts/#{$font-filename}.svg##{$font-family}") format("svg"), url("../fonts/#{$font-filename}.woff") format("woff"), url("../fonts/#{$font-filename}.ttf") format("truetype")
    font-weight: $font-weight
    font-style: $font-style
    font-stretch: $font-stretch

Применение:

+declare-font-face('Open Sans Light', 'OpenSans-Light-webfont', 200)
person Peter MK    schedule 26.04.2014

arrow_upward
1
arrow_downward

Internet Explorer использует файлы шрифтов .eot. Вы можете заставить это работать даже в IE8. Вам нужно преобразовать ваши шрифты otf в woff, eot, ...

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Например, для создания этих файлов можно использовать http://www.fontsquirrel.com/.

person JohanVdR    schedule 26.04.2014
comment
спасибо за ваш ответ, я преобразовал свой файл otf в eot с помощью онлайн-конвертера, теперь мой код шрифта выглядит так: ` @font-face { font-family: xy; источник: URL-адрес (шрифты/xy.otf); источник: URL('шрифты/xy.eot'); /* Режимы совместимости IE9 / src: url('fonts/xy.eot?#iefix') format('embedded-opentype'); / IE6-IE8 */ } ` и по-прежнему ничего не происходит в ie (i11, win8) - person Richard Zilahi; 26.04.2014
comment
Может быть, в IE 11 есть ошибка? - person JohanVdR; 26.04.2014

arrow_upward
-2
arrow_downward

Вы можете использовать условные комментарии в IE.

<!--[if IE]>
<style>
.myfontclass {
//your IE specific font here
}
</style>
<![endif]-->

Надеюсь, это поможет!

person user3575278    schedule 26.04.2014
comment
нет, к сожалению, т.е. условный оператор был удален в т.е. 9,11 со следующим утверждением: Условные комментарии не требуются. Нет необходимости в «[если IE 10]», потому что страницы будут отображаться (в основном) одинаково во всех современных браузерах. - person Richard Zilahi; 26.04.2014
comment
@user3576148 user3576148 хорошо, я не знал об этом. спасибо, что указали на это. - person user3575278; 27.04.2014