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

2021-12-30 00:00:00 fonts php laravel css

完全初学者到 Laravel 5 并尝试在我的标题中使用此代码导入自定义字体:

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

<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 中调用它.目前我的字体存储在我的公共目录中:

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

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

我的字体加载不正确.

推荐答案

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

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/fonts/OptimusPrinceps.tff(您已经完成)中，您可以通过以下两种方式之一访问它.

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

在刀片中:

<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 魔法.只需绝对引用路径，以便它指向正确的目录.

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.

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

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

相关文章