问题描述
完全初学者到 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/
.
这篇关于我在哪里可以在 Laravel 5 中放置自定义字体?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!