Почему мои обычные шрифты не загружаются, а смелые - - PullRequest
Новая
       37

Почему мои обычные шрифты не загружаются, а смелые -

0 голосов
/ 12 февраля 2019

В чем может быть причина того, что мои другие шрифты не могут быть загружены.Это мой файл fonts.css 

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Regular.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Light.ttf) format("truetype");
  font-style: normal;
  @apply .font-light;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-SemiBold.ttf) format("truetype");
  font-style: normal;
  @apply .font-semibold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Italic.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Bold.ttf) format("truetype");
  font-style: normal;
  @apply .font-bold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Black.ttf) format("truetype");
  font-style: normal;
  @apply .font-black;
}

Но жирным шрифтом будут отображаться только ненормальные шрифты

Website test

lookпри этом загружаются / выделяются только черные шрифты ..

enter image description here

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Вы должны использовать другое font-family имя для разных шрифтов 

@font-face {
  font-family: "Source Sans Pro normal";
  src: url(../assets/fonts/sans/SourceSansPro-Regular.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro light";
  src: url(../assets/fonts/sans/SourceSansPro-Light.ttf) format("truetype");
  font-style: normal;
  @apply .font-light;
}

@font-face {
  font-family: "Source Sans Pro semibold";
  src: url(../assets/fonts/sans/SourceSansPro-SemiBold.ttf) format("truetype");
  font-style: normal;
  @apply .font-semibold;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Italic.ttf) format("truetype");
  font-style: normal;
  @apply .font-normal;
}

@font-face {
  font-family: "Source Sans Pro bold";
  src: url(../assets/fonts/sans/SourceSansPro-Bold.ttf) format("truetype");
  font-style: normal;
  @apply .font-bold;
}

@font-face {
  font-family: "Source Sans Pro black";
  src: url(../assets/fonts/sans/SourceSansPro-Black.ttf) format("truetype");
  font-style: normal;
  @apply .font-black;
}
0 голосов
/ 12 февраля 2019

Вам нужно определить font-weight, чтобы иметь разные веса шрифта.Правило @apply, похоже, игнорируется @font-face.Попробуйте: 

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url(../assets/fonts/sans/SourceSansPro-Light.ttf) format("truetype");
  font-style: normal;
  font-weight: 300;
}

и так далее, я бы порекомендовал следующий вес: 

thin 100
extra-light 200
light 300
regular 400
medium 500
semi-bold 600
bold 700
extra-bold 800
black 900
...