在Laravel中找不到带有字体的字体

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

最好的方法是将.ttf转换为不同的字体格式

以获得#Deepest可能的浏览器支持。检查这里：

https://css-tricks.com/snippets/css/using-font-face/

可能的原因是使用.ttf而不提供例如.woff文件字体。

Answer 2

我已经用Laravel Mix解决方案对其进行了修复。我已将以下内容添加到我的Mix配置中：

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

因此，我可以将路径更改为../fonts/etc，就像Joe Ydoan Rauzes提到的那样，因为字体现在同时位于resources和public目录中。它将在资源中复制fonts的目录，并将其放置在每次编译的public目录中。

Answer 3

我在linux环境中遇到了同样的问题。我已经下载了字体并将其复制到公共目录（css目录中的css和fonts目录中的字体）。默认情况下，该文件夹的用户和组是当前登录的用户域，我们需要更改该文件夹的权限，以便www-data可以访问它。

PreviewView

Answer 4

在 Laravel 8 中，基于上面的设置：Mix.copyDirectory('resources/fonts', 'public/fonts')，字体路径需要像这样从根引用：

src: url('/fonts/LatoLatin-Regular.woff2') format('woff2')

不是这样：../fonts 否则你会因为缺少字体而得到错误。