benutzerdefinierte Schriftarten sehen nicht nach dem Build in Ionic2

Question

Ich versuche, meine eigenen benutzerdefinierten Schriftart-Dateien in ionic2 Anwendung hinzuzufügen, @ font-Gesicht und Pfad meiner benutzerdefinierten Schriftart-Dateien hinzugefügt.

hinzugefügt in der Datei app.variable.scss.

@font-face { 
     font-family: my-fonts; 
     src: url("../fonts/my-fonts.eot") format("eot"); 
     src: url("../fonts/my-fonts.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/my-fonts.woff") format("woff"), /* Modern Browsers */ url("../fonts/my-fonts.ttf") format("truetype"); 
     font-weight: normal; 
     font-style: normal; 

     /* IE9 Compat Modes */`enter code here` 
     /* Safari, Android, iOS */ 
    } 



$font-family-md-base: "my-fonts"; 
$font-family-ios-base: "my-fonts"; 
$font-family-wp-base: "my-fonts"; 

Hergestellt in gulpfile.js:

gulp.task("fonts", function() { 
    return copyFonts({ 
     src: [ 
      "app/theme/fonts/**/*.+(eot|svg|ttf|woff)" 
     ] 
    }); 
}); 

Wenn ich bauen meine Anwendung nicht in der Lage, die diese Schriften im www sehen/build/Fonts-Ordner selbst.

Alles, was ich falsch mache?

Answer 1

Ich würde ein paar Dinge bezüglich der Pfade ändern:

Zuerst in den font-face Regeln ändern die src

src: url("../fonts/my-fonts.eot") format("eot"); 

die $font-path Variable wie folgt umfassen:

src: url("#{$font-path}/my-fonts.eot") format("eot"); 

Und dann in der Gulp Aufgabe:

gulp.task("fonts", function() { 
    return copyFonts({ 
     src: [ 
      "app/fonts/**/*.+(eot|ttf|woff|woff2|svg)" 
     ] 
    }); 
}); 

Dadurch sollten Sie in der Lage sein, Ihre Schriftarten im Ordner www\fonts zu finden.

Answer 2

Ich habe die Lösung für diese Frage.

Fügen Sie eine Aufgabe für benutzerdefinierte Schriftarten in der Datei gulpfile.js hinzu, um die benutzerdefinierten Schriftartdateien beim Erstellen der Ionic 2-Anwendung einzubeziehen.

gulp.task("customFonts", function() { 
    return copyFonts({ 
     src: [ 
      'app/fonts/**/*.+(eot|ttf|woff|woff2|svg)' 
     ] 
    }); 
}); 

umfassen die neu geschaffene Aufgabe in der runSequesnce von gulp.task ('watch' und gulp.task ('bauen',

runSequence ([ 'Sass', ' html‘, 'Schriftarten', 'customFonts', 'scripts'],

Answer 3

ich ging gerade durch diese und ich wollte nur zusammenfassen, was für mich gearbeitet:

I heruntergeladen Google Font Muli

dieses

@font-face { 
    font-family: "Muli"; 
    src: url("../fonts/Muli-Regular.ttf") format("truetype"); 
} 

dies dem app.variable In den app.core.scss hinzugefügt.SCSS

$font-family-md-base: "Muli"; 
$font-family-ios-base: "Muli"; 
$font-family-wp-base: "Muli"; 

hinzugefügt, um diese an die schluck Datei:

gulp.task("customFonts", function() { 
    return copyFonts({ 
     src: [ 
      "app/fonts/**/*.+(eot|ttf|woff|woff2|svg)" 
     ] 
    }); 
}); 

Fügen Sie auch "customFonts" auf die zeitliche Abfolge:

gulp.task('watch', ['clean'], function(done){ 
    runSequence(
    ['sass', 'html', 'fonts', 'customFonts', 'scripts'], 
    function(){ 
     gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 
     gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); 
     buildBrowserify({ watch: true }).on('end', done); 
    } 
); 
}); 

gulp.task('build', ['clean'], function(done){ 
    runSequence(
    ['sass', 'html', 'fonts', 'customFonts', 'scripts'], 
    function(){ 
     buildBrowserify({ 
     minify: isRelease, 
     browserifyOptions: { 
      debug: !isRelease 
     }, 
     uglifyOptions: { 
      mangle: false 
     } 
     }).on('end', done); 
    } 
); 
}); 

Stored die Schriften in: app/fonts

Danke für die Hilfe !!

UPDATE Ionic RC0:

Sie brauchen jetzt nur in der folgenden auf Ihre variable.scss Datei zu setzen.

@font-face { 
    font-family: "Muli"; 
    src: url("../assets/fonts/Muli-Regular.ttf") format("truetype"); 
} 

$font-family-md-base: "Muli"; 
$font-family-ios-base: "Muli"; 
$font-family-wp-base: "Muli";