我正在尝试使用本地字体文件使我的字体在我的 Angular 元素中工作。所以我有一个字体 Univers LT
,这些文件与 fonts.scss
文件一起放在 assets/fonts
中。然后我在 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');
}
例如当我在 h1
标签中使用 UniverseBlack
时。我去 font-family: 'UniverseBlack'
,根据我的理解,它应该可以完成这项工作,但事实并非如此!非常感谢任何输入!
最佳答案
注意:对字体使用 css 扩展名而不是 scss,它可能会解决您的问题。我已经实现了你的字体并且工作得很好。这是我到目前为止所做的。
Assets 文件夹中的文件结构应该是:
> 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';
}
关于css - 如何在 Angular 中导入和使用字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57835337/