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

Complete beginner to Laravel 5 and trying to import custom fonts using this code in my header:

完成初学者到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;
}

and calling it in my variables.scss. Currently my fonts are stored in my public directory:

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

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

For some reason this warning appears in my dev tools

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

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

And my font doesn't load correctly.

我的字体无法正确加载。

4 个解决方案

#1

Place anything that the client browser should access into /public/. You can use the Laravel helper function public_path to build full URLs for it.
https://laravel.com/docs/5.2/helpers#method-public-path

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

For instance, if you put your font in /public/fonts/OptimusPrinceps.tff (which you've done), you can access it one of two ways.

例如,如果将字体放在/public/fonts/OptimusPrinceps.tff(已完成)中,则可以通过以下两种方式之一访问它。

In Blade:

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

In CSS includes:

在CSS中包括:

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

In the second example, you don't need any Laravel magic, really. Just reference the path absolutely so that it points to the correct directory.

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

Worth noting that this works with Bootstrap and SCSS. I usually put fonts in /public/static/fonts/.

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

#2

In webpack.mix.js add

在webpack.mix.js中添加

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

Full doc here: https://laravel.com/docs/5.5/mix

完整文档:https://laravel.com/docs/5.5/mix

#3

In Laravel 5.4 in CSS, i had to add the /public before the /fonts folder for it to work. (for css included in a file)

在CSS的Laravel 5.4中,我必须在/ fonts文件夹之前添加/ public才能使用它。 (对于包含在文件中的css)

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

An alternative which is the best way would be to use the assets() helper function as below. The fonts folder should be in the public directory for this case. (for css in the head tag)

另一种最好的方法是使用assets()辅助函数,如下所示。对于这种情况,fonts文件夹应该位于公共目录中。 (对于head标签中的css)

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

#4

To add the public keyword when you including the custom font in laravel please add following:

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

supose font path is css/fonts/proxima-nova-light-59f99460e7b28.otf in public directory then use as

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');
}

So you can use the ../public/+ font path in public directory. If you have any issue please tell me your font path I will update you path for that.

因此,您可以在公共目录中使用../public/+字体路径。如果您有任何问题,请告诉我您的字体路径我将为您更新路径。

#1