Проблемы со шрифтами - без учета веса и высоты строки

Question

Я хочу использовать пользовательский шрифт, поэтому я добавил код ниже:

Я проверил путь шрифтов и он правильный.

Вес шрифта игнорируется.Если я добавлю другой шрифт в Familly, как Arial, пока он не загрузится, он займет только Arial.

1.

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

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


h1 {
font: 700 1.875rem Gop;
}

p{
font: 400 1.875rem Gop;

}

---

Если при сбросе у меня есть:

html * { line-height: 1.15 }

и позже:

h1 { line-height: 1.5 }

Высота строки дляh1 игнорируется.

Answer 1

1) Ваши строки "font:" немного отформатированы, попробуйте добавить "normal" впереди:

font: normal 700 1.875rem Gop;

Краткое описание однострочного шрифта (порядок имеет значение): https://css-tricks.com/snippets/css/font-shorthand/

Вообще говоря, лучше разделить объявление шрифта на отдельные строки, например:

font-family: Gop;
font-weight: 700;
font-size: 1.875rem;

Это немного дольшено проще решать проблемы.Что приводит ко второй проблеме ...

2) Вам необходимо указать ВСЕ атрибуты при использовании сокращения CSS, иначе они вернутся к значениям по умолчанию.

Информация об этом здесь: https://css -tricks.com / randomal-css-resets /

Так что вам нужно будет включить высоту строки в ваш шрифт:

font: normal 700 1.875rem/1.5 Gop;

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