自定义字体在Ionic3

我使用Ionic3：自定义字体在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应用此新的字体文件。但是，我似乎无法使其生效。

正如你所看到的，它依然使用的离子默认：

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

问题

请谁能告诉我如何使用ttf实施新的字体文件在离子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文件？

来源

2017-04-19 Richard

感谢您对此的更新。它非常帮助我 – RobIsAnxious

查看关于overriding SASS variables的部分。

你需要重写

$font-family-base在variable.scss。

如果你想要它是android/ios特定覆盖： $font-family-md-base或 $font-family-ios-base分别。

尝试：

$font-family-base: Ormont_Light

来源

2017-04-19 09:13:00

你需要重写Ionic Sass Variables。您需要在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;

来源

2017-04-19 09:14:53 Math10

自定义字体在Ionic3

回答

相关问题