Ionic 中的自定义字体问题答案

【问题标题】：Custom font issue in IonicIonic 中的自定义字体问题
【发布时间】：2018-07-12 21:24:45
【问题描述】：

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

简要说明：在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，菜单图标、后退图标和所有其他图标也会消失[见左上角和右上角]，如下图所示。

为什么会这样？

【问题讨论】：

您可以执行相同的过程来使用字体 awsome

标签： angular ionic-framework sass ionic2 ionic3

【解决方案1】：

转到variables.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-base: 'Humanst';
$font-family-ios-base: 'Humanst';
$font-family-md-base: 'Humanst';
$font-family-wp-base: 'Humanst';

！重要 只能作为最后的手段使用，否则它将覆盖所有内容！

【讨论】：