自定义字体离子2

Question

所以我试图在我的Ionic 2应用程序中使用自定义字体,由于某种原因,它显示的内容不正确.

我的字体是GothamRounded,所以我将所有.ttf,.svg,.otf和.eot文件复制到我的Ionic项目的www/fonts文件夹中.

然后,在app.component.scss(我的主要组件)里面我写了这个:

app {

  @font-face {
    font-family: GothamRounded;
    src: url($font-path + "/GothamRounded-Book.ttf");
  }

  font-family: GothamRounded;

}

现在,当我的应用程序重新加载时,我的字体已经改变,如果我检查一个带有文本的元素,我可以在开发控制台中看到:

app {
    font-family: GothamRounded;
}

但显示的文字有一个seriff,我的字体没有,所以我猜这实际上并没有得到真正的字体.

知道可能会发生什么吗？谢谢

Answer 1

为什么选择应用程序？它只是为了向我们展示代码,或者你在代码中的某处有一个app标签？对我而言<ion-app>

尝试将src设置为所有字体扩展名并使用前面的格式

@font-face {
  font-family: GothamRounded;
  src: url($font-path + "/GothamRounded-Book.ttf") format('ttf'), url($font-path + "/GothamRounded-Book.otf") format('otf'), ...;
}

我也使用自定义字体而且我的内容不在app.scss文件中的任何其他.scss文件中,所以在我的app.scss里面我有这个:

@font-face {
  font-family: 'Humanst';
  src: url('../assets/fonts/humanst-webfont.woff2') format('woff2'), url('../assets/fonts/humanst-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Humanst' !important;
}