Angularjs 在Ionic2中构建之后，无法看到自定义字体

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

将其添加到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文件夹中看到此字体

---

我做错了什么

我将更改一些与路径相关的内容：

首先，在

font-face

规则中，更改

src

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

要包括如下所示的

$font path

变量：

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

然后在吞咽任务中：

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

---

通过这样做，您应该能够在

www\font

文件夹中找到您的字体。

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

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

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

将新创建的任务包括在运行序列中的gulp.task（'watch'）和gulp.task（'build'，

---

运行序列（['sass'、'html'、'font'、'customFonts'、'scripts']、

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

我下载了谷歌字体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)"
        ]
    });
});

还将“customFonts”添加到运行序列中：

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

将字体存储在：app/font

谢谢大家的帮助

更新Ionic RC0:

现在只需将以下内容放入variable.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";

---

您的控制台中是否有关于字体丢失的404？这似乎是一个路径问题。您是否也将

font

任务添加到

build

任务中？我在gulp文件中为自定义字体设置了新任务，但字体文件夹本身在www\build folder中显示为丢失。如何设置src:url（#{$font path}/my fonts.eot”）格式(“eot”）；如果我的字体在app/fonts文件夹中？？www\fonts或它应该在www\build\fonts中？？不要将字体放在node_模块或build文件夹中。node_模块文件夹在npm安装时更新，或者npm update和build文件夹在每个build命令中创建。如果不想使用

$font path

变量，也可以引用将它们如下所示：

src:url（“../../fonts/my fonts.eot”）格式（“eot”）

Hey Sebafereras..谢谢你的支持。但是我用另一种方式解决了这个问题。我在gulp文件中犯了一个错误，我没有在gulp.task“runSequence”中正确添加字体。太好了！如果你不介意，请编辑OP以包含该信息，这样其他有相同问题的用户可以轻松解决这个问题r:）fontface我们可以在app.variable.scss中添加ryt？谢谢！我不确定。我把它放在app.core.scss中了。