Question

我正在尝试在 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文件夹中看到这些字体。

我做错了什么？

Answer 1

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

我下载了Google Font 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 / fonts

中

感谢大家的帮助!!

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

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

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

Answer 3

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

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

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

在 gulp.task（'watch'）和 gulp.task（'build'，

的runSequesnce中包含新创建的任务

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

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

3 个答案: