问使用Ionic2自定义字体

EN

在最新的Ionic2 RC中，这似乎已经移到了src/assets下的某个地方，可能是src/assets/fonts。在您的SCSS文件中对这些文件的引用(根据@indermohan-singh)是相对于CSS文件的，因此将类似于url("../assets/fonts/aleo-italic-webfont.woff2")。

src/assets下的所有东西都会在构建过程中被复制过来，所以这是存放你需要的其他东西的好地方，比如图片。

添加自己的字体的最好方法是使用gulp。我将我的自定义字体添加到目录app/theme/fonts中，并将此源代码添加到gulpfile.js文件中的gulp插件ionic-gulp-fonts-copy中。

// add own src 
gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'app/theme/fonts/**/*.+(ttf|woff|woff2)'
    ],
    dest: 'www/build/fonts'
  })
});

src中的第一行是默认的，第二行是自定义的。在这之后，你可以用css声明你的字体，例如。

/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}

试试看！

ionic 2编译时，如果您检查app.scss上的字体路径通常是../../assets，则会创建www/ build /main.css，但在构建期间该点不会指向任何地方。

在app.scss上添加路径，如../assets/fonts/fontname.ttf，并在www/assets/fonts/fontname.ttf上添加字体

它对我来说是完美的。