css - 在 Laravel 中找不到带有 font-face 的字体

Question

我正在 Laravel 网站上工作，这是我第一次使用 font-face 来加载自定义字体。不幸的是，它没有按预期工作。

我的字体位于 /public/fonts 并基于此 question 使用以下代码

@font-face {
  font-family: Miriam Libre;
  src: url("/fonts/MiriamLibre-Regular.tff");
}

@font-face {
  font-family: Whitney Book;
  src: url("/fonts/whitney-book-webfont.tff");
}

body {
  font-family: Whitney Book, sans-serif;
  font-size: 16px;
  margin: 0;
  line-height: 1.2;
}

label {
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    font-family: Miriam Libre, serif;
    text-transform: uppercase;
    color: $text-dark;
    z-index: 10;
    position: relative;
}

但是这不起作用，因为我收到 404 错误。以下目录的屏幕截图。

有人对此有一些快速提示或解决方案吗？不幸的是，我在 StackOverflow 上找不到任何解决方案。

编辑 奇怪的是，如果我点击其中一种字体的路径，它实际上会下载该字体。

Answer 1

我已经用 Laravel Mix 修复了它解决方案。我已将以下内容添加到我的 Mix 配置中:

Mix.copyDirectory('resources/fonts', 'public/fonts');

然后我可以将路径更改为 ../fonts/etc就像提到的 Joe Ydoan Rauzes 因为字体现在都位于 resources和 public目录。它将复制目录 fonts在资源中并将其放在 public 中每个编译的目录。