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

Question

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

而且我的字体无法正确加载。

原文由 user3818418 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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/ 中。

原文由 Josh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 webpack.mix.js 添加

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

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

原文由 Adam Pery 发布，翻译遵循 CC BY-SA 3.0 许可协议