Php 在Laravel 5中，我在哪里放置自定义字体？

完成Laravel 5的初学者学习，并尝试在我的标题中使用以下代码导入自定义字体：

<style>
@font-face {
    font-family: 'Conv_OptimusPrinceps';
    src: url('fonts/OptimusPrinceps.eot');
    src: local('☺'), url('fonts/OptimusPrinceps.woff') format('woff'), url('fonts/OptimusPrinceps.ttf') format('truetype'), url('fonts/OptimusPrinceps.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

出于某种原因，此警告出现在我的开发工具中

Failed to decode downloaded font: http://localhost:3000/fonts/OptimusPrinceps.tff
OTS parsing error: invalid version tag

---

并且我的字体加载不正确。

将客户端浏览器应该访问的任何内容放入

/public/

。您可以使用Laravel助手函数

public\u path

为其构建完整的URL。

例如，如果您将字体放在

/public/fonts/OptimusPrinceps.tff

（您已经这样做了），您可以通过以下两种方式之一访问它

在刀片中：

<style type="text/css">
@font-face {
    font-family: OptimusPrinceps;
    src: url('{{ public_path('fonts/OptimusPrinceps.tff') }}');
}
</style>

在第二个例子中，你不需要任何拉威尔魔法，真的。只需绝对引用路径，使其指向正确的目录

---

值得注意的是，这适用于引导和SCS。在CSS的Laravel 5.4中，我通常将字体放在

/public/static/font/

文件夹中，我必须在

/font

文件夹之前添加

/public

。（用于包含在文件中的css）

最好的替代方法是使用

assets（）

helper函数，如下所示。在这种情况下，“字体”文件夹应位于公用目录中。（用于头标记中的css）

`
@字体{
字体系列：OptimusPrinceps；
src:url（{asset（'/font/OptimusPrinceps.tff'）}}）；
}
`

要在laravel中包含自定义字体时添加公共关键字，请添加以下内容：

supose字体路径是公共目录中的css/fonts/proxima-nova-light-59f99460e7b28.otf，然后用作

@font-face {
  font-family: 'proxima-nova';
  font-style: normal;
  font-weight: 900;
  src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf');
}

因此，您可以使用公共目录中的./public/+字体路径。

---

如果您有任何问题，请告诉我您的字体路径，我将为此更新您的路径。

在

webpack.mix.js

添加

mix.copyDirectory('resources/assets/fonts', 'public/fonts');

---

此处的完整文档：

您是否尝试过使用

public\u path（）

：没有，但看起来是一个解决方案。在我的示例中，我将如何对其进行编码？现在唯一的问题是：

不允许加载本地资源：file:///E:/MainWeb%20DesignProjectsLore%20Soulspublic/fonts/OptimusPrinceps.tff

这是一个浏览器跨站点攻击问题，而不是Laravel问题。您正在通过一个不允许浏览器加载自己资源的URL访问应用程序。您可以将字体放在公共文件夹中。这应该是公认的答案。这是一个比公认的答案更简洁的方法。两个答案都是正确的。被接受的答案和这一个。我两者都用了。

`@font-face {
    font-family: OptimusPrinceps;
    src: url('/public/fonts/OptimusPrinceps.tff');
}`

`<style>
@font-face {
    font-family: OptimusPrinceps;
    src: url('{{asset('/fonts/OptimusPrinceps.tff')}}');
}
</style>`

@font-face {
  font-family: 'proxima-nova';
  font-style: normal;
  font-weight: 900;
  src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf');
}

mix.copyDirectory('resources/assets/fonts', 'public/fonts');