web-dev-qa-db-ja.com

Laravel 5？

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

そして、私のフォントは正しく読み込まれません。

phpcsslaravelfonts
19
user3818418

クライアントブラウザがアクセスする必要のあるものはすべて/public/。 Laravelヘルパー関数public_path完全なURLを作成します。
https://laravel.com/docs/5.2/helpers#method-public-path

たとえば、フォントを/public/fonts/OptimusPrinceps.tff（実行済み）、次の2つの方法のいずれかでアクセスできます。

ブレード内：

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

2番目の例では、Laravel magicはまったく必要ありません。正しいディレクトリを指すように絶対にパスを参照してください。

これはBootstrapとSCSSで動作することに注意してください。私は通常/public/static/fonts/。

21
Josh

webpack.mix.js追加

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

完全なドキュメントはこちら： https://laravel.com/docs/5.5/mix

4
Adam Pery

CSSのLaravel 5.4）では、_/public_フォルダーの前に_/fonts_フォルダーを追加する必要がありました（ファイルに含まれるcssの場合）

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

最善の方法である代替方法は、以下のようにassets()ヘルパー関数を使用することです。この場合、fontsフォルダーはpublicディレクトリーになければなりません。 （headタグのcssの場合）

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

laravelにカスタムフォントを含めるときにパブリックキーワードを追加するには、以下を追加してください。

フォントパスがcss/fonts/proxima-nova-light-59f99460e7b28.otfであり、パブリックディレクトリにあるとし、次にasを使用するとします。

@font-face {
  font-family: 'proxima-nova';
  font-style: normal;
  font-weight: 900;
  src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf');
}

したがって、パブリックディレクトリで../ public / +フォントパスを使用できます。問題がある場合は、フォントパスを教えてください。そのパスを更新します。

2
LetsCMS Pvt Ltd