最不可能的字体未在Chrome上渲染的字体。 我有两个本地安装的字体，我试图通过 @font-face规则在项目中使用。但是，当我在浏览器中打开项目时，我会在控制台中获得以下错误： 无法...

Question

Failed to load resource: the server responded with a status of 404 (Not Found)

控制台错误

尽管如此，当我检查devtools中的computed
部分时，我的标头字体（recoleta

）的字体也正确渲染，即使据说它没有加载。这是令人困惑的 - 如果浏览器无法加载该字体，该字体将如何应用？

正在应用Recoleta，请参阅此图像的底部 更大的问题是，我的第二个字体（Kind_sans），应用于段落，没有加载或应用。
我尝试了什么 ver ver ver ver vile路径是正确的。

检查了文件名中的病例敏感性。

确保@font-face规则已正确编写。

切割缓存并尝试了不同的浏览器。

• 尽管如此，我仍然陷入困境。关于为什么会发生这种情况以及如何解决它的任何见解？

  我已将相关的CSS和文件结构附加了参考。任何帮助将不胜感激！ 文件结构

• /* RECOLETA FONT */
  
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Regular.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'Recoleta';
    src: url('../app/fonts/Recoleta/Recoleta-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
  }
  
  /* KINDSANS FONT */
  
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansThin-930828392.woff2')
      format('woff2');
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansLight-930828394.woff2')
      format('woff2');
    font-weight: 200;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansSemilight-930828396.woff2')
      format('woff2');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansMedium-930828400.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansSemibold-930828402.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansBold-930828404.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansHeavy-930828406.woff2')
      format('woff2');
    font-weight: 800;
    font-style: normal;
  }
  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansBlack-930828408.woff2')
      format('woff2');
    font-weight: 900;
    font-style: normal;
  }
  
  h1,
  h2,
  h3 {
    font-family: Recoleta, serif;
    font-weight: 600;
    margin-top: 0;
  }
  
  
  p {
    margin-top: 0;
    font-family: kind_sans, sans-serif;
    font-weight: 400;
  }

  使用本地安装的字体进行尝试，但浏览器不会渲染其中一个

• 我找出了解决方案。感谢@kiki软件将我指向正确的方向。问题在于WebStorm的内置服务器将Web服务器的root设置为我的主要开发目录（

  D:/Web dev/

  ），而不是我的单个项目文件夹（
  D:/Web dev/ practice-1
）。
• 当我使用时，这意味着：

  @font-face {
    font-family: 'kind_sans';
    src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
  }

浏览器在错误的位置看。正确的路径需要包括项目名称，因为服务器根是父目录：

@font-face {
  font-family: 'kind_sans';
  src: url('/practice-1/app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
    format('woff2');
  font-weight: 400;
  font-style: normal;
}

现在正确地正确地查找了浏览器：
D:/Web dev/practice-1/app/fonts/Kind_Sans/KindSansRegular-930828398.woff2

注：当使用WebStorm的内置服务器（在端口63342上运行）时，此解决方案可行。您可能会看到CSS刻有堆砌的错误，因为无法解决目录，因为相对于服务器与CSS文件的字体路径相对于CSS文件是不同的，但是我无视这些目录，因为它们来自编辑器，并且不会影响实际的网站功能。