Tôi đặt phông chữ tùy chỉnh ở Laravel 5 ở đâu?

Question

Toàn bộ người mới bắt đầu để Laravel 5 và cố gắng nhập khẩu phông chữ tùy chỉnh sử dụng mã này trong phần đầu của tôi:

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

và gọi đó là trong variables.scss tôi. Hiện nay các phông chữ của tôi được lưu trữ trong thư mục công cộng của tôi:

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

Đối với một số lý do cảnh báo này xuất hiện trong các công cụ dev của tôi

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

Và phông chữ của tôi không tải một cách chính xác.

Answer 1

Đặt mọi thứ mà trình duyệt của khách hàng truy cập vào /public/. Bạn có thể sử dụng hàm trợ giúp Laravel public_path để tạo URL đầy đủ cho nó.
https://laravel.com/docs/5.2/helpers#method-public-path

Ví dụ, nếu bạn đặt phông chữ của bạn trong /public/fonts/OptimusPrinceps.tff (mà bạn đã làm), bạn có thể truy cập vào nó một trong hai cách.

Trong Blade:

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

Trong CSS bao gồm:

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

Trong ví dụ thứ hai, bạn không cần bất kỳ ma thuật Laravel, thực sự. Chỉ cần tham khảo đường dẫn tuyệt đối để nó trỏ đến thư mục chính xác.

Đáng chú ý rằng thao tác này hoạt động với Bootstrap và SCSS. Tôi thường đặt phông chữ trong /public/static/fonts/.

Answer 2

Trong Laravel 5.4 trong CSS, tôi phải thêm /public trước thư mục /fonts để nó hoạt động.

Answer 3

Để thêm từ khóa nào khi bạn bao gồm các phông chữ tùy chỉnh trong laravel xin vui lòng thêm sau:

đường dẫn font Giả sử là css/fonts/PROXIMA-nova-light-59f99460e7b28.otf trong thư mục công cộng sau đó sử dụng như

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

vì vậy, bạn có thể sử dụng ../public/ + đường dẫn font trong thư mục công cộng. Nếu bạn có bất kỳ vấn đề xin vui lòng cho tôi biết đường dẫn phông chữ của bạn, tôi sẽ cập nhật cho bạn đường dẫn cho điều đó.

Answer 4

Trong webpack.mix.js thêm

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

Full doc ở đây: https://laravel.com/docs/5.5/mix