Benutzerdefinierte schriftart importieren in Angular4

Benutze ich Angular4 und habe ein problem mit der Nutzung meiner benutzerdefinierten schriftart. Ich habe versucht mit font-face, aber es gibt mir die Fehlermeldung, dass die font-Datei nicht gefunden werden kann. Was muss ich tun um diese Datei damit ich Sie in meine Komponente?

@font-face {
  font-family: 'lcd-plain';
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* For IE */
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* For Chrome and Safari */
  url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* For FireFox */
  /*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
  /*format("svg");*/
}

svg.gauge {
  font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}

InformationsquelleAutor viddrawings | 2017-09-28

  1. 10

    ich glaube das problem ist, wie Winkel-gerade die Pfade in den Komponenten.

    Dem, was ich normalerweise tun ist, erstellen Sie einen font-Ordner unter src und legte meine Schriften gibt.
    Ich habe dann erstellen Sie Ordner styles für meine benutzerdefinierte Stile, wo ich eine schriftart.scss mit folgendem:

    $archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';

    In meinem src-Ordner gibt es einen Stile.scss. Ich importieren meine Schriften.scss
    und erkläre meine Schrift da

    @import "./src/styles/fonts";
@font-face {
    font-family: 'archisticobold';
    src:url($archistico-woff2-font-path) format('woff2'),
        url($archistico-woff-font-path) format('woff');
    font-weight: normal;
    font-style: normal;
}

    Hoffe es hilft

    Das ist Brillant!

    InformationsquelleAutor Alberto L. Bonfiglio

  2. 2

    Gibt es die src Eigenschaft, das kann ein URL zu einer entfernten font-Datei-Speicherort oder der name der Schrift auf dem computer des Benutzers. Also, wenn Sie dienen dem Ordner "assets" als statische Dateien und Sie haben den Ordner "fonts" dort, Sie sollten in der Lage sein Verweis auf die font-Dateien, die relativ zu Ihrem app-URL wie diese:

    @font-face {
  font-family: 'lcd-plain';
  src: url('/fonts/lcd-plain/lcd-plain.ttf') format('truetype'),
}
    Danke für die Antwort! Jedoch bekomme ich die Fehlermeldung, dass das Verzeichnis kann nicht aufgelöst werden 🙁 ich habe den Ordner "assets", die enthält mein fonts-Ordner, in das eckige-cli.json-innen Vermögenswerte als "Vermögenswerte": [ "Vermögen", "Schriftarten", "favicon.ico" ]
    Wenn Sie die Fehlermeldung erhalten? Zur compile-Zeit oder zur Laufzeit? Was bedeutet der Fehler genau Aussehen?
    Meine IDE (webstorm) das problem verursacht. Es erkennt nicht den Pfad, und ich bekomme nicht die richtige schriftart angezeigt, wenn ich die Anwendung ausführen.
    Versuchen Sie, navigieren Sie zu localhost:4200/fonts/lcd-plain/lcd-plain.ttf oder was auch immer könnte die url so Aussehen wie in Ihrem Fall. Die Schriftarten sollten serviert werden, die von der devserver. Wenn nicht, versuchen Sie herauszufinden, fom gibt.
    Es geht um mein google-docs-viewer und zeigen Sie die schriftart, also der Pfad, den Sie mir gab, ist richtig.

    InformationsquelleAutor Hinrich

Schreibe einen Kommentar