为什么我的普通字体无法加载但粗体字体可以答案

【问题标题】：Why my normal fonts won't load but the bold ones do为什么我的普通字体无法加载但粗体字体可以
【发布时间】：2019-07-05 14:17:11
【问题描述】：

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

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

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

【问题讨论】：

我认为它不像普通操作系统那样工作。您需要为每个单独的字体文件定义不同的font-family（除非它们具有不同的扩展名）。所以在这里它似乎只是加载最后声明的字体（SourceSansPro-Black）并重载它！
正确答案在这里。
@MojtabaHn 定义不同的font-family 名称不是最好的解决方案，这样做的方法是为相同的font-weight 声明不同的font-weight 然后浏览器将完成这项工作，更多解释在css-tricks.com/whats-deal-declaring-font-properties-font-face

标签： css laravel tailwind-css

【解决方案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

【讨论】：

你以前用过tailwindcss吗？ tailwind.js 文件中有一个 fontweights 对象。我在@apply .font-normal 中提到了它。请知道我首先发布的代码。
这就是为什么我建议你定义font-weight...我很确定@apply 规则在@font-face 上被忽略了

【解决方案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;
}

【讨论】：

不需要使用不同的font-family名称，方法是为相同的font-family声明不同的font-weight，然后浏览器将加载正确的字体。