Gdzie umieszczać niestandardowe czcionki w Laravel 5?

Question

Początkujący Kompletna do laravel 5 i próbuje importować niestandardowe czcionki za pomocą tego kodu w moim nagłówku:

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

i nazywając go w moim variables.scss. Obecnie moje czcionki są przechowywane w moim katalogu publicznym:

public/fonts/OptimusPrinceps.woff 
public/fonts/OptimusPrinceps.tff 
etc. 

Z jakiegoś powodu wydaje się to ostrzeżenie w moim dev narzędzi

Failed to decode downloaded font: http://localhost:3000/fonts/OptimusPrinceps.tff 
OTS parsing error: invalid version tag 

A moja czcionka nie załadować poprawnie.

Answer 1

Umieść wszystko, co przeglądarka klienta ma uzyskać pod adresem /public/. Możesz użyć funkcji pomocniczej Laravel public_path, aby zbudować dla niej pełne adresy URL.
https://laravel.com/docs/5.2/helpers#method-public-path

Na przykład, jeśli umieścisz swoją czcionkę w /public/fonts/OptimusPrinceps.tff (co już zrobione), można to jeden z dwóch sposobów dostępu.

W Blade:

<style type="text/css"> 
@font-face { 
    font-family: OptimusPrinceps; 
    src: url('{{ public_path('fonts/OptimusPrinceps.tff') }}'); 
} 
</style> 

W CSS obejmuje:

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

W drugim przykładzie, nie trzeba żadnej magii laravel, naprawdę. Wystarczy odwołać się do ścieżki absolutnie tak, aby wskazywała właściwy katalog.

Warto zauważyć, że działa to z Bootstrap i SCSS. Zwykle umieszczam czcionki w /public/static/fonts/.

Answer 2

W Laravel 5.4 w CSS, musiałem dodać /public przed folderem /fonts, aby działał.

Answer 3

Aby dodać słowa kluczowego publicznej po tym niestandardowej czcionki w laravel należy dodać następujące:

supose ścieżka czcionka jest css/fonts/Proxima-nova-light-59f99460e7b28.otf w katalogu publicznym następnie użyć jako

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

Więc można użyć ../public/ + ścieżkę czcionki w katalogu publicznym. Jeśli masz jakiś problem, powiedz mi, proszę, ścieżkę do czcionki. Zaktualizuję dla ciebie ścieżkę.

Answer 4

W webpack.mix.js dodać

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

Pełna doc tutaj: https://laravel.com/docs/5.5/mix