我在哪里可以在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

我的字体无法正确加载.

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/.

Answer 2

在 Laravel 5.4 的 CSS 中，我必须在文件夹/public之前添加/fonts才能使其正常工作。（对于文件中包含的 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>`

Answer 3

在webpack.mix.js添加

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

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