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

在webpack.mix.js添加

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

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

Answer 3

在CSS中的Laravel 5.4中，我必须在function binarySearch(arr, num, l, r){ if( arr instanceof Array ){ l = isNaN(l) ? 0 : l; r = isNaN(r) ? arr.length - 1: r; let mid = l + 1 + Math.round((r - l)/2 - 1); console.log(l, r, mid, arr[mid]); if( num == arr[mid] ){ console.log("found"); return mid; } if( typeof arr[mid] == "undefined" || l == r ){ console.log("not found"); return -1; } if( num < arr[mid] ){ console.log("take left"); return binarySearch(arr, num, l, r - mid); } console.log("take right"); return binarySearch(arr, num, mid, r); } } console.log( binarySearch([0, 0, 1 ,1, 2, 3, 5, 6, 11], 2) );文件夹之前添加/public才能使用它。（对于包含在文件中的css）

/fonts

另一种最好的方法是使用`@font-face { font-family: OptimusPrinceps; src: url('/public/fonts/OptimusPrinceps.tff'); }`辅助函数，如下所示。对于这种情况，fonts文件夹应该位于公共目录中。（对于head标签中的css）

assets()

Answer 4

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

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

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

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

4 个答案: