Установка шрифтов в CSS: каждый стиль по имени или свойство weight?

Question

[thehighhomie]

Добрый вечер господа! Подскажите на данный момент актуальность подключения шрифтов таким образом:
(пример с Open Sans, это просто пример, так как нужных веб шрифтов может не оказаться в гугле или других сервисах)

@font-face {
	font-family: "OpenSansRegular";
	src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot");
	src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.woff") format("woff"),
	url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: "OpenSansLight";
	src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot");
	src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot?#iefix")format("embedded-opentype"),
	url("../fonts/OpenSans/OpenSansLight/OpenSansLight.woff") format("woff"),
	url("../fonts/OpenSans/OpenSansLight/OpenSansLight.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

и т.д.

Мне не очень нравится такой тип подключения, он не удобен, каждый стиль это font-family: 'OpenSans[style]' и хоть есть сейчас препроцессоры, все же удобнее просто поставить font-weight: [weight].

Я читал примерно полтора года назад где-то статью по этому поводу, и там акцент именно на этот стиль, а если при подключении менять font-weight и font-style то это не хорошо, не помню почему.

Кто на опыте поделитесь мудростью пожалуйста!

Answer 1

[Антон Спирин]

Правильно так:

@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot");
  ...
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot");
  ...
  font-weight: 300;
  font-style: normal;
}

Пример использования:

html {
  font-family: 'OpenSans', sans-serif;
  font-size: 14px;
}

.example-with-regular-text {
  // nothing
}

.example-with-light-text {
  font-weight: 300;
}

Comments

[Никита]

И только так правильно ! Алюминь

Answer 2

[dom1n1k]

Работать будут оба варианта, но более удобны, конечно, манипуляции со свойствами style/weight.
Вариант с отельными именами был популярен несколько лет назад, потому что в те времена это было более кроссбраузерно. Но сегодня уже нет причин так делать.