Installieren Sie Schriften auf Winkel 2 Seite

Question

Ich habe eine Angular 2-Anwendung, in der ich WrapBootstrap verwenden möchte. Ich habe jedoch ein Problem mit den Schriften (bootstrap, font-awesome, google), da ich nicht weiß, wie man sie implementiert.

Wenn die CSS-Datei für wrapbootstrap verwenden ist, sagt es nicht Schrift genial finden:

„Ressource konnte nicht geladen werden: Der Server reagiert mit dem Status 404 (nicht gefunden) http://localhost:8000/fonts/font-awesome/fontawesome-webfont.woff2?v=4.4.0“

kann ich nicht machen Sinn dieser Sache, wie ich die fehlenden Dateien in Ressourcen in der Chrome-Konsole auf dieser genauen Adresse sehen kann.

Die Schriftart-Dateien zur Zeit in einem Ordner vi den folgenden relativen Pfad von der CSS (application.css) Datei verwendet sie:

, die den erforderlichen Weg in denen passen CSS-Datei:

ich hoffe, so da draußen kann ich eine Anleitung geben, wenn ich verloren bin.

Vielen Dank im Voraus

Gelöst das Problem war offenbar die Lage meiner Fonts-Ordner. meine Dateistruktur sind wie folgt:

und ich habe hinzugefügt, zunächst die Schriften/in Bezug auf, wo die application.css Datei war. Es musste sich im Stammverzeichnis meiner App befinden (src)

Answer 1

Das Hinzufügen von Schriftarten, die mit dem Paket-Manager installiert werden, ist häufig eine Aufgabe. Zum Beispiel ist die Verwendung von font-awesome oder einer anderen ähnlichen Bibliothek eine typische Aufgabe, die benötigt wird.

Zu diesem Zweck können Sie durch die folgenden Schritte gehen:

1. In tools/config/project.config.ts:

   ... 
       export class ProjectConfig extends SeedConfig { 
        PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 
   
        FONTS_DEST = `${this.APP_DEST}/fonts`; 
        FONTS_SRC = [ 
         'node_modules/bootstrap/dist/fonts/**' 
        ]; 
   ... 
   

2. Erstellen Sie eine Datei tools/tasks/project/build.fonts.ts:

   import * as gulp from 'gulp'; 
   import Config from '../../config'; 
   
   export =() => { 
       return gulp.src(Config.FONTS_SRC) 
        .pipe(gulp.dest(Config.FONTS_DEST)); 
   }; 
   

3. In gulpfile.ts (oder in seed.tasks.json für n Ewer Versionen des Seed)

   // Build dev. 
   gulp.task('build.dev', done => 
       runSequence('clean.dev', 
          'tslint', 
          'build.assets.dev', 
          'build.fonts', // Added task; 
          'build.js.dev', 
          'build.index.dev', 
          done)); 
   // Build prod. 
   gulp.task('build.prod', done => 
       runSequence('clean.prod', 
          'tslint', 
          'build.assets.prod', 
          'build.fonts', // Added task; 
          'build.html_css.prod', 
          'build.js.prod', 
          'build.bundles', 
          'build.bundles.app', 
          'build.index.prod', 
          done)); 
   // Build test. 
   gulp.task('build.test', done => 
       runSequence('clean.dev', 
          'tslint', 
          'build.assets.dev', 
          'build.fonts', // Added task; 
          'build.js.test', 
          'build.index.dev', 
          done)); 
   

src