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

Answer 2

您必须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;
}