wake-up-neo.com

Wo platziere ich eigene Schriftarten in Laravel 5?

Schließe den Anfänger mit Laravel 5 ab und versuche, benutzerdefinierte Schriften mit diesem Code in meinem Header zu importieren:

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

und es in meinen variables.scss aufrufen. Derzeit werden meine Schriftarten in meinem öffentlichen Verzeichnis gespeichert:

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

Aus irgendeinem Grund erscheint diese Warnung in meinen Entwicklungswerkzeugen

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

Und meine Schrift wird nicht richtig geladen.

phpcsslaravelfonts
15
user3818418

Platzieren Sie alles, auf das der Client-Browser zugreifen soll, in /public/. Sie können die Laravel-Hilfsfunktion public_path verwenden, um vollständige URLs dafür zu erstellen.
https://laravel.com/docs/5.2/helpers#method-public-path

Wenn Sie beispielsweise Ihre Schrift in /public/fonts/OptimusPrinceps.tff setzen (was Sie getan haben), können Sie auf zwei Arten darauf zugreifen.

In der Klinge:

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

In CSS beinhaltet:

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

Im zweiten Beispiel benötigen Sie wirklich keine Laravel-Magie. Verweisen Sie den Pfad nur so, dass er auf das richtige Verzeichnis verweist. 

Erwähnenswert ist, dass dies mit Bootstrap und SCSS funktioniert. Normalerweise setze ich Schriftarten in /public/static/fonts/.

15
Jim

In webpack.mix.js add

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

Vollständiges Dokument hier: https://laravel.com/docs/5.5/mix

4
Adam Pery

In Laravel 5.4 in CSS musste ich den /public vor dem /fonts-Ordner hinzufügen, damit er funktioniert. (für CSS in einer Datei enthalten)

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

Eine Alternative, die am besten geeignet ist, wäre die assets()-Helferfunktion wie unten beschrieben. Der Schriftartenordner sollte sich für diesen Fall im öffentlichen Verzeichnis befinden. (für css im head tag)

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

Um das öffentliche Schlüsselwort hinzuzufügen, wenn Sie die benutzerdefinierte Schriftart in Laravel einfügen, fügen Sie Folgendes hinzu:

der angegebene Schriftpfad lautet css/fonts/proxima-nova-light-59f99460e7b28.otf im öffentlichen Verzeichnis und wird dann als verwendet

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

Sie können also den Pfadpfad ../public/ + im öffentlichen Verzeichnis ..__ verwenden. Wenn Sie ein Problem haben, teilen Sie mir bitte Ihren Schriftartpfad mit. Ich werde den Pfad dafür aktualisieren.

1
LetsCMS Pvt Ltd