我在 Laravel 5 中的哪里放置自定义字体？答案

【问题标题】：Where do I place custom fonts in Laravel 5?我在 Laravel 5 中的哪里放置自定义字体？
【发布时间】：2016-05-01 12:59:58
【问题描述】：

完全是 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;
}

并在我的 variables.scss 中调用它。目前我的字体存储在我的公共目录中：

public/fonts/OptimusPrinceps.woff
public/fonts/OptimusPrinceps.tff 
etc.

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

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

而且我的字体没有正确加载。

【问题讨论】：

你试过用public_path():laravel.com/docs/5.2/helpers#method-public-path
不，我没有，但看起来像一个解决方案。我将如何在我的示例中对其进行编码？

标签： php css laravel fonts

【解决方案1】：

将客户端浏览器应访问的任何内容放入/public/。你可以使用 Laravel 辅助函数 public_path 为其构建完整的 URL。
https://laravel.com/docs/5.2/helpers#method-public-path

例如，如果您将字体放入 /public/fonts/OptimusPrinceps.tff（您已经完成），您可以通过以下两种方式之一访问它。

在刀片中：

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

在 CSS 中包括：

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

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

值得注意的是，这适用于 Bootstrap 和 SCSS。我通常把字体放在/public/static/fonts/.

【讨论】：

我现在唯一的问题是这个：Not allowed to load local resource: file:///E:/MainWeb%20DesignProjectsLore%20Soulspublic/fonts/OptimusPrinceps.tff
这是一个浏览器跨站点漏洞利用问题，而不是 Laravel 问题。您正在通过不允许浏览器加载您自己的资源的 URL 访问您的应用程序。
您可以将您的字体放在您的公用文件夹中

【解决方案2】：

在webpack.mix.js添加

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

完整文档在这里：https://laravel.com/docs/5.5/mix

【讨论】：

这应该是公认的答案。这比公认的答案更干净。
两个答案都是正确的。接受的答案和这个。我都用过。

【解决方案3】：

在 CSS 中的 Laravel 5.4 中，我必须在 /fonts 文件夹之前添加 /public 才能使其工作。（对于包含在文件中的 css）

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

最好的替代方法是使用assets() 辅助函数，如下所示。对于这种情况，字体文件夹应位于公共目录中。（对于head标签中的css）

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

【讨论】：

【解决方案4】：

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

假设字体路径是公共目录中的 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/+ 字体路径。如果您有任何问题，请告诉我您的字体路径，我会为此更新您的路径。

【讨论】：