Ionic中的自定义字体问题

Question

要求：我需要应用自定义字体。

简要说明：app.scss我们正在调用以下字体：

@font-face {
  font-family: 'Roboto';
  src: url('../assets/fonts/Roboto/Roboto-Light.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'Roboto';
}

    // @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;
// }

当我们执行ionic serve时，如果我们对 Roboto字体代码进行评论并取消注释 Humanst ，则不会应用此字体，问题不会在此处结束，菜单图标，后退图标和所有其他图标也会消失[见左上角和右上角]，如下图所示。

为什么会这样？

Answer 1

转到variables.scss＆amp;在文件末尾添加以下代码：

@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-base: 'Humanst';
$font-family-ios-base: 'Humanst';
$font-family-md-base: 'Humanst';
$font-family-wp-base: 'Humanst';

！重要 应该只作为最后的手段，否则它将覆盖一切！