自定义字体 Ionic 2

因此，我尝试在 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;
}

但显示的文本有衬线，而我的字体没有，所以我猜这实际上并没有得到真正的字体。

知道会发生什么吗？ 谢谢

为什么要使用应用程序选择器？它只是为了向我们展示代码还是您的代码中确实有一个应用程序标签？对我来说是<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;
}