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

Добрый вечер господа! Подскажите на данный момент актуальность подключения шрифтов таким образом:
(пример с 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 то это не хорошо, не помню почему.

Кто на опыте поделитесь мудростью пожалуйста!
  • Вопрос задан
  • 1502 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Правильно так:
@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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dom1n1k
@dom1n1k
Работать будут оба варианта, но более удобны, конечно, манипуляции со свойствами style/weight.
Вариант с отельными именами был популярен несколько лет назад, потому что в те времена это было более кроссбраузерно. Но сегодня уже нет причин так делать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы