ionic-framework - 如何在 Ionic 4 中安装新字体？

Question

有谁知道如何更新 Ionic 4 的字体？

我尝试将 aileron.woff 添加到 Assets /字体并将其放入 variables.scss 中，但无济于事。

  src: url('../assets/fonts/aileron.woff') format('woff');

Answer 1

这就是我设法向我的 Ionic 应用程序添加自定义字体的方法

将包含字体文件的目录添加到文件夹src\assets\fonts 下的项目中。

src\assets\fonts\myCustomFont
 |
 +-- MyCustomFontBold.ttf
 +-- MyCustomFontBoldItalic.ttf
 +-- MyCustomFontItalic.ttf
 +-- MyCustomFontRegular.ttf

定义文件 src\theme\variables.scss 中的字体:

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: normal;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: normal;
  src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}

@font-face {
  font-family: 'My Custom Font';
  font-style: italic;
  font-weight: bold;
  src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}

在同一个文件中 src\theme\variables.scss , 编辑 :root元素将您的自定义字体定义为 Ionic 应用程序的字体:

--ion-font-family: 'My Custom Font';