Ionic3中的自定义字体 [英] Custom Fonts in Ionic3

问题描述

我正在使用 Ionic3 ：

 您的系统信息：
 
 Cordova CLI：6.4.0 
 Ionic Framework版本：3.0.1 
 Ionic CLI版本：2.1.18 
 Ionic App Lib版本：2.1.9 
 Ionic App Scripts版本：1.3.0 
 ios-deploy版本：未安装
 ios-sim版本：未安装
操作系统：macOS Sierra 
节点版本：v6.9.4 
 Xcode版本：Xcode 8.3.1构建版本8E1000a 
  

我有以下字体： Ormont_Light.ttf

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

正如你所看到的，它仍然使用Ionic默认值：

  font-family：Roboto，Helvetica Neue，sans-serif; 
  

问题

任何人都可以建议如何使用 ttf来实现新字体 Ionic 3中的文件？

更新

我添加以下内容：

  @ font-face {
 font-family：Ormont_Light; 
 src：url（../ assets / fonts / Ormont_Light.ttf）格式（ttf）; 
 font-weight：normal; 
 font-style：normal; 
} 
 body {
 font-family：Ormont_Light！important; 
} 
  

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

  body {
 font-family：Ormont_Light！important; 
} 
  

但它没有像预期的那样在全球范围内应用到应用程序。 / p>

更新

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 - 家庭：Ormont_Light！重要; 
} 
  

但显示的字体使用 Times New Roman font，我猜这是浏览器默认无法找到引用的字体。所以我想我的 .ttf 文件的路径不正确。

你在哪里 .ttf file？

解决方案

你需要覆盖离子Sass变量。
你需要在 src / theme / variables.scss 中添加这个font-face。

  @ font-face {
 font-family：'Ormont_Light'; 
 src：url（'../ assets / fonts / Ormont_Light.ttf'）格式（'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; 
  

I am using 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

I have the following font: Ormont_Light.ttf

As you can see above, I try apply this new font in the app.scss file. However, I cannot seem to make it take effect.

As you can see, it is still using the Ionic default of:

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

Question

Please can anyone advise how to implement a new font using a ttf file in Ionic 3?

UPDATE

I add the following:

@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;
}

Now I get the font showing up in the source:

body {
    font-family: Ormont_Light !important;
} 

But it's not being applied to the app on a global level as expected.

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;

Thanks, That kind of works. It is now applying Ormont_Light too all my styles which is great. i.e. the dom now has:

body {
    font-family: Ormont_Light !important;
}

But the the displayed font is using Times New Roman font, which I guess is the browser default when it cannot find the font referenced. So I guess my path to my .ttf file is incorrect.

Where do you keep you .ttf file?

解决方案

You need to override the Ionic Sass Variables . You need to add this font-face in 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;

这篇关于Ionic3中的自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！