问题描述
我想将新字体导入到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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!