Как сделать, чтобы два одинаковых шрифта разной толщины работали в IE10?

Question

[Иван Желудков]

Есть такая вёрстка. Но речь о конкретной проблеме со шрифтом. В конце страницы есть список контактов:

И он выглядит нормально во всех браузерах, кроме IE. Не знаю как в старых версиях, но проблема есть даже в IE10. Вот такая проблема:


Итак, есть подключенные шрифты:

@font-face {
	font-family: "BebasNeueBold";
	src: url("fonts/BebasNeueBold.otf"), 
		 url("fonts/BebasNeueBold.ttf");
}
@font-face {
	font-family: "BebasNeueBook";
	src: url("fonts/BebasNeueBook.otf"),
		 url("fonts/BebasNeueBook.ttf");
}

Они же подключены к левой и правой части этой строчки с контактом. То есть один шрифт жирный, другой лёгкий.

.contact-name {
	font-family: "BebasNeueBold";
	font-size:24px;
}
.contact-content {
	font-family: "BebasNeueBook";
	font-size:24px;
}

Не знаю, уже обыскался ошибок, ничего не нашёл. Если поставить вместо этого шрифта, допустим Roboto, шрифт, который подключен ссылкой на Google Fonts, то всё будет отображаться нормально. А вот именно этот шрифт не отображается. Может дело в том, что BebasNeue уже есть жирный и он подключен, а второй BebasNeue не работает, хоть и другой толщины?

Answer 1

[Serj-One]

Вопрос обсуждался уже тысячу раз.
Для IE < 9 нужен шрифт в формате eot, IE 9+ - woff.
Подключайте все нужные форматы.

@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  src: url('../fonts/room_bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/room_bold-webfont.woff2') format('woff2'),
  url('../fonts/room_bold-webfont.woff') format('woff'),
  url('../fonts/room_bold-webfont.ttf') format('truetype'),
  url('../fonts/room_bold-webfont.svg#roombold') format('svg');
  font-weight: 600;
  font-style: normal;
}

Конвертировать можно здесь или здесь

+ насыщенность для одного и того же шрифта , указывается не через разные font-family, а через font-weight, заданный в описании шрифта.
Пример:

@font-face {
  font-family: 'room';
  src: url('../fonts/room-webfont.eot');
  /*остальные форматы*/
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  /*остальные форматы*/
  font-weight: 600;
  font-style: normal;
}

Теперь, указав font-family для всего нужного блока, можно оперировать только насыщенностью, указывая font-weight.

Comments

[Евгений Петров]

Для IE c 9-й версии никакой eot не нужен.

[Евгений Петров]

Да, и вы не разобрались, что делают дескрипторы font-style, font-weight, font-stretch в @font-face.

[Serj-One]

Евгений Петров: В чём же это я не разобрался?

[Евгений Петров]

Serj-One: Приношу извинения. Безусловно, про дескрипторы у вас всё написано верно. Я неверно адресовал сообщение — оно было предназначено не вам, а ТС.

[Иван Желудков]

Спасибо. Я было задумался о том, как сделать, чтобы можно было менять только толщину, но где-то ошибся и сделал разными шрифтами.

[Евгений Петров]

Иван Желудков: Прочитайте ещё раз то, что написал Serj-One. Смысл не управлении толщиной одного шрифта из целого семейства, а в назначении одного имени и использованию разных шрифтов по их насыщенности (наклону etc.).

[Иван Желудков]

Евгений Петров: Да, это всё мне понятно.

[Иван Желудков]

rghost.ru/6L54Vbrjb/image.png Такая запись привела к тому, что все шрифты стали тонкими, а font-weight влияет не на изменение шрифта на жирный, а на обводку букв, как я понял.

[Иван Желудков]

Причём как в случае с font-weight: 300; (утончается браузером), так и с font-weight: 600; (утолщается).

[Serj-One]

Иван Желудков: Неправильно поняли. Ищите ошибку.

[Иван Желудков]

Serj-One: у меня же в точности как у вас написано, разве нет?

[Иван Желудков]

Но я поправил, просто у вас ошибка, как я понимаю. Font-face всё равно нужно два.

Answer 2

[Евгений Петров]

Посмотрите на поддержку формата ttf. Очевидно, в IE существуют проблемы. Следует применять шрифт в формате woff, тем более, что он и весит меньше.
Конвертеров много. Лучший из них (в смысле функционала) Fontsquirrel.

Вот пример куска вашего кода с конвертацией ваших шрифтов в woff.

Comments

[Иван Желудков]

Спасибо.