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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36966953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 01:00:27  来源:igfitidea点击:

Where do I place custom fonts in Laravel 5?

phpcsslaravelfonts

提问by user3818418

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.

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

回答by Josh

Place anything that the client browser should access into /public/. You can use the Laravel helper function public_pathto 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/.

回答by Adam Pery

In webpack.mix.jsadd

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

回答by Allan Dereal

In Laravel 5.4 in CSS, i had to add the /publicbefore the /fontsfolder for it to work. (for css included in a file)

在 CSS 中的 Laravel 5.4 中,我必须/public/fonts文件夹之前添加它才能工作。(对于包含在文件中的 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()辅助函数,如下所示。在这种情况下,字体文件夹应位于公共目录中。(用于 head 标签中的 css)

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

回答by LetsCMS Pvt Ltd

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

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