自定义字体 离子 2.

Question

所以我正在尝试在我的 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;
}

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

知道会发生什么吗？谢谢

Answer 1

为什么选择应用程序？ 只是为了向我们展示代码，还是代码中的某个地方确实有一个应用标记？对我来说，这很<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;
}

Answer 2

$regular:'MuseoSans-500';
$bold:'MuseoSans-700';
@each $font-face in $regular,
$bold {
  @font-face {
    font-family: $font-face;
    font-style: normal;
    font-weight: normal;
    src: url('../assets/fonts/#{$font-face}.eot');
    src: url('../assets/fonts/#{$font-face}.eot?') format('eot'),
    url('../assets/fonts/#{$font-face}.woff') format('woff'),
    url('../assets/fonts/#{$font-face}.ttf') format('truetype'),
    url('../assets/fonts/#{$font-face}.svg##{$regular}') format('svg');
  }
}

如果要

添加多种字体，这将很有帮助。