如何在Ionic 4中安装新字体? [英] How do I install new fonts in Ionic 4?

问题描述

有人知道如何为Ionic 4更新字体吗?

Does anyone know how to update the font for Ionic 4?

我尝试将aileron.woff添加到资产/字体中，然后将其放在variables.scss中无效.

I tried adding the aileron.woff to assets/fonts and putting this in the variables.scss to no avail.

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

推荐答案

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

This is how I managed to add a custom font to my Ionic application

1. 将包含字体文件的目录添加到项目src\assets\fonts

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

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

Define the fonts in the file 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应用程序的字体:

In the same file src\theme\variables.scss, edit the :root element to define your custom font as the font of the Ionic application:

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

这篇关于如何在Ionic 4中安装新字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！