Css 自定义字体2

因此，我试图在我的Ionic 2应用程序中使用自定义字体，但由于某些原因，它显示了一些不正确的内容

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

然后，在app.component.scss（我的主要组件）中，我写道：

app {

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

  font-family: GothamRounded;

}

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

app {
    font-family: GothamRounded;
}

但是显示的文本有一个衬线，而我的字体没有，所以我猜这不是真正的字体

知道会发生什么吗？

---

谢谢

为什么选择应用程序选择器？它只是为了向我们展示代码，还是你的代码中真的有一个应用程序标签？对我来说是

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

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

我也在使用自定义字体，而我的字体在任何其他.scss文件（不是app.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;
}

$regular:'MuseoSans-500'；
$bold:'MuseoSans-700'；
@$REQUALE中的每个$font字体，
$bold{
@字体{
字体系列：$font-face；
字体风格：普通；
字体大小：正常；
src:url（'../assets/font/#{$font-face}.eot'）；
src:url（'../assets/font/{$font-face}.eot？'）格式（'eot'），
url（'../assets/font/#{$font-face}.woff'）格式（'woff'），
url（'../assets/font/#{$font-face}.ttf'）格式（'truetype'），
url（'../assets/fonts/#{$font-face}.svg#{$regular}'）格式（'svg'）；
}
}

通常情况下，资源会转到src/assets文件夹。您的字体应该位于src/assets/fonts文件夹中，并设置

src:url（'./assets/fonts/GothanRounded Book.ttf'）

。另外，$font-path是什么？$font-path正是variables.scss

$font-path:../assets/fonts”中定义的变量尝试使用
/assets/font
此路径适用于我的图像。。双点表示父文件夹，并将字体复制到src/assets，它将在构建期间复制到您的www/assets。路径为../，因此正确；另外，字体已经被复制到folderWell中了，看来关键在于格式woff，我把它包括进去了，一切都很好。你的回答实际上解决了这个问题，谢谢！很高兴它有帮助：donvariables.scss您可以覆盖变量$font族基。