Wo lege ich benutzerdefinierte Schriftarten in Laravel 5?

Anfänger bis zum Laravel 5 und versucht zu importieren, benutzerdefinierte Schriftarten mit diesem code in der Kopfzeile:

<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 nannte es in meine Variablen.scss. Derzeit meine Schriftarten gespeichert sind, in meinem öffentlichen Verzeichnis:

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

Für einige Grund diese Warnung wird angezeigt, in meinem dev-tools

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

Und meine Schrift nicht richtig laden.

InformationsquelleAutor user3818418 | 2016-05-01
  1. 18

    Gegenstände, die der client-browser zugreifen, sollten in /public/. Sie können mithilfe des Laravel Hilfsfunktion public_path zu bauen vollständigen URLs für Sie.

    https://laravel.com/docs/5.2/helpers#method-public-path

    Zum Beispiel, wenn Sie Ihre schriftart in /public/fonts/OptimusPrinceps.tff (was Sie getan haben), können Sie für den Zugriff gibt es zwei Möglichkeiten.

    In Blade:

    <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, Sie brauchen keine Laravel Magie, wirklich. Nur auf den Pfad absolut so, dass es auf das richtige Verzeichnis.

    Erwähnenswert, dass das arbeiten mit Bootstrap und SCSS. Ich in der Regel legen Sie Schriftarten in /public/static/fonts/.

    • Das einzige Problem, ich jetzt habe, ist dieses hier: Not allowed to load local resource: file:///E:/MainWeb%20DesignProjectsLore%20Soulspublic/fonts/OptimusPrinceps.tff
    • Das ist ein browser, cross-site-exploit-Problem, nicht ein Laravel ein. Der Zugriff auf Ihre Anwendung über eine URL, die nicht zulässt, dass Ihrem browser und laden Sie Ihre eigenen Ressourcen.
    • Sie können Ihre fonts in Ihren Ordner "öffentlich"
    InformationsquelleAutor James
  2. 4

    In webpack.mix.js hinzufügen

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

    Ausführlich hier: https://laravel.com/docs/5.5/mix

    InformationsquelleAutor Adam Pery
  3. 2

    In Laravel 5.4 in CSS, ich hatte, um die /public vor der /fonts Ordner für Sie zu arbeiten. (für css in eine Datei aufgenommen)

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

    Eine alternative, die ist der beste Weg wäre, um die assets() Helfer-Funktion, wie unten beschrieben. Der fonts-Ordner sollte in dem öffentlichen Verzeichnis für diesen Fall. (für css in den head-tag)

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

    Hinzufügen das Schlüsselwort public, wenn Sie einschließlich die benutzerdefinierte schriftart in laravel fügen Sie bitte Folgendes:

    nehme font-Pfad css/fonts/proxima-nova-light-59f99460e7b28.otf in dem öffentlichen Verzeichnis dann als

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

    So können Sie die ../public/+ font-Pfad im öffentlichen Verzeichnis.
    Wenn Sie irgendeine Frage haben, bitte sagen Sie mir Ihre font-Pfad werde ich Sie aktualisieren, Pfad, für, dass.

    InformationsquelleAutor LetsCMS Pvt Ltd
Schreibe einen Kommentar