Ionic3中的自定义字体

Question

我正在使用Ionic3:

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a

我有以下字体: Ormont_Light.ttf

如您所见,我尝试在app.scss文件中应用此新字体.但是,我似乎无法让它生效.

如您所见,它仍然使用Ionic默认值:

font-family: "Roboto", "Helvetica Neue", sans-serif;

题

请问任何人都可以建议如何使用ttfIonic 3中的文件实现新字体？

UPDATE

我添加以下内容:

@font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
 font-weight: normal;
 font-style: normal;
}
body {
    font-family: Ormont_Light !important;
}

现在我得到了源代码中显示的字体:

body {
    font-family: Ormont_Light !important;
} 

但它没有像预期的那样在全球范围内应用于应用程序.

UPDATE

variables.scss

$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;

谢谢,那种作品.它现在应用Ormont_Light我所有的风格,这是伟大的.即dom现在有:

body {
    font-family: Ormont_Light !important;
}

但显示的字体是使用Times New Roman字体,我猜是当它找不到引用的字体时,它是浏览器的默认值.所以我想我的.ttf文件路径不正确.

你把.ttf文件放在哪里？

Answer 1

您需要覆盖Ionic Sass变量.你需要添加这个font-face src/theme/variables.scss.

@font-face {
 font-family: 'Ormont_Light';
 src:url('../assets/fonts/Ormont_Light.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;