我正在尝试使用本地字体文件在我的角度项目中使用字体。所以我有一个字体Univers LT
,将文件放在assets/fonts
与一起fonts.scss
文件。然后我在angular.json
:
"styles":[
//... other styles
"src/assets/fonts/fonts.scss"
]
以下是我的font.scss
:
@font-face {
font-family: 'UniversBlack';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.ttf') format('ttf');
}
例如,当我UniverseBlack
在h1
标签中使用什么时。我走了font-family: 'UniverseBlack'
,在我的理解下,这应该可以完成这项工作,但事实并非如此!任何输入,不胜感激!
注意:使用css扩展名代替字体,可能会解决您的问题。我已经实现了您的字体,并且效果很好。这是我到目前为止所做的。
资产文件夹中的文件结构应为:
> UniversLTStd-Black.woff
> font.css
在font.css中:
@font-face {
font-family: 'Univers LT Std 75 Black';
font-style: normal;
font-weight: normal;
src: local('Univers LT Std 75 Black'), url('UniversLTStd-Black.woff') format('woff');
}
该字体可以通过两种方式附加。
第一种方式:您可以将其添加为angular.json。然后,您必须通过ng serve重新启动
第二种方式将其导入styles.css中。然后它将正常工作。
在styles.css中:
@import "../src/assets/fonts/font.css";
然后以任何组件样式:
h1 {
font-family: 'Univers LT Std 75 Black';
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句