Задать вопрос
@Shillkas11

@font-face различные варианты одного шрифта?

Привет. На сайте используется несколько вариаций одного и того же шрифта:
@font-face {
	font-family: HelveticaRegular;
	src: url(/fonts/Helvetica/HelveticaRegular.ttf);
}
@font-face {
	font-family: HelveticaLight;
	src: url(/fonts/Helvetica/HelveticaLight.ttf);
}
@font-face {
	font-family: HelveticaBold;
	src: url(/fonts/Helvetica/HelveticaBold.ttf);
}


Сейчас думаю грузить только `HelveticaRegular` и регулировать различные вариации с помощью CSS свойств, но проблема в том что по всему сайту font-family используется в различных вариациях, и в каждом отдельном CSS правиле редактировать это совсем не хочется. Можно ли задать css свойства для шрифта уже при подключении в font-face, т.е. исходя из примера выше во всех трех font-face будет грузиться один и тот же шрифт HelveticaRegular.ttf, но для различных вариантов будет применяться определенные css свойства?
  • Вопрос задан
  • 403 просмотра
Подписаться 1 Простой Комментировать
Решение пользователя Алексей Скляров К ответам на вопрос (2)
У вас HelveticaRegular это шрифт Helvetica с 400 жирностью, то есть если вы подключите этот шрифт и поставите font-weight:700,то у шрифта все равно жирность не поменяется.

Вам нужно делать так:

@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaRegular.ttf);
  font-weight:400;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaLight.ttf);
  font-weight:300;
}
@font-face {
  font-family: Helvetica;
  src: url(/fonts/Helvetica/HelveticaBold.ttf);
  font-weight:700
}
Ответ написан
Комментировать