在 Ionic2 中构建后看不到自定义字体

Question

我正在尝试在ionic2应用程序中添加自己的自定义字体文件，添加了自定义字体文件的@font面和路径。

将其添加到 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"; 

添加到 gulpfile 中.js ：

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

当我构建我的应用程序时，无法在 www/build/fonts 文件夹本身中看到此字体。

我做错了什么？

Answer 1

我刚刚经历了这个，我只是想总结一下对我有用的东西：

我下载了谷歌字体Muli

已将此添加到 app.core.scss

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

将此添加到 app.variable.scss

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

将此添加到 gulp 文件中：

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

还要将"自定义字体"添加到运行序列中：

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

将字体存储在：应用程序/字体

感谢大家的帮助！！

更新离子RC0：

您现在只需要将以下内容放入您的变量.scss文件中。

@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";

Answer 2

我会改变一些与路径相关的内容：

首先，在font-face规则中，更改src

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

包含$font-path变量，如下所示：

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

然后在 Gulp 任务中：

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

通过这样做，您应该能够在wwwfonts文件夹中找到您的字体。

Answer 3

我得到了这个问题的解决方案。

在gulpfile中添加自定义字体的任务.js以便在我们构建Ionic 2应用程序时包含自定义字体文件。

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

将新创建的任务包含在 gulp.task（'watch' 和 gulp.task（'build'，

runSequence（ ['sass'， 'html'， 'fonts'， 'customFonts'， 'scripts']，