css - 为什么我的普通字体无法加载，但粗体字体可以加载

Question

可能是我的其他字体无法加载的可能原因。这是我的 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;
}

但是加粗的只会显示，不会显示正常的字体

看看只有黑色字体加载/粗体..

Answer 1

您需要定义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