如何将新字体导入项目-Angular 5 [英] How to import a new font into a project - Angular 5

问题描述

我想将新字体导入到Angular 5项目中.

I want to import a new font to my Angular 5 project.

我尝试过:

1)将文件复制到素材资源/字体/

1) Copying the file to assets/fonts/

2)将其添加到.angular-cli.json样式

但是我已经检查过文件不是.css，它是一个.otf，它的作用类似于.exe(它是安装程序)，所以我真的不知道如何导入它.有什么主意吗?

but I have checked that the file is not a .css, it is an .otf that works like an .exe (it is an installer) so I do not really know how to import it. Any idea?

推荐答案

您需要将字体文件放入资产文件夹(可能是资产中的字体子文件夹)，并以以下样式引用它:

You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

完成后，您可以在以下任何位置应用此字体:

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

您可以将@font-face定义放在全局styles.css或styles.scss中，即使在特定于组件的CSS/SCSS中，也可以在任何地方引用该字体. styles.css或styles.scss已在angular-cli.json中定义.或者，如果需要，您可以创建一个单独的CSS/SCSS文件，并在 cli.json和styles.css或styles.scss中声明它，例如:

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere - even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [
  "styles.css",
  "fonts.css"
],

这篇关于如何将新字体导入项目-Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！